注：本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ，采用直接引入高德 SDK 的方式来使用高德地图api
一、效果图
二、组件要实现的功能
1. 如果有传入坐标点，则定位到坐标点
2. 如果没有传入坐标点，则定位到当前所在位置
3. 定位成功要在右侧显示经纬度和地址
4. 可以通过拖动 标记 来调整定位点
5. 标记 拖动后，右侧要显示拖动后的经纬度和地址
6. 点击确定按钮，返回最后的坐标点和地名给父组件
三、 组件实现具体代码
<template>
<div class="map-box" :style="{ width: width, height: height }">
<div id="amap" class="amap"></div>
<div class="detail">
<p>经度：{{point ? point[0] : '-'}}</p>
<p>纬度：{{point ? point[1] : '-'}}</p>
<p>地址：{{address}}</p>
<button size="mini" class="btnmap" @click="commit">确定</button>
</div>
</div>
</template>
<script>
import AMap from 'AMap'
export default {
props: {
width: { type: String, default: '100%' },
height: { type: String, default: '400px' },
lnglat: {
type: Array,
validator: (value) => {
return value.length === 2
}
}
},
data () {
return { address: '', point: this.lnglat }
},
mounted () {
this.init(this.point)
},
methods: { // 初始化
init (lnglat) {
// 地图实例对象 （amap 为容器的id）
let amap = new AMap.Map('amap', {
resizeEnable: true,
zoom: 15
})
// 注入插件（定位插件，地理编码插件）
amap.plugin(['AMap.Geolocation', 'AMap.Geocoder'])
// 定位
this.currentPosition(amap, lnglat)
},
currentPosition (map, lnglat) {
if (lnglat) {
// 有传入坐标点，直接定位到坐标点
map.setCenter(lnglat)
this.addMark(map, lnglat)
// 获取地址
this.getAddress(lnglat)
} else {
// 没有传入坐标点，则定位到当前所在位置
let geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000,
zoomToAccuracy: true,
buttonPosition: 'RB'
})
geolocation.getCurrentPosition((status, result) => {
if (status === 'complete') {
let points = [result.position.lng, result.position.lat] map.setCenter(points) // 设置中心点
this.addMark(map, points) // 添加标记
// 存下坐标与地址
this.point = points
this.getAddress(points)
} else {
console.log('定位失败', result)
}
})
}
