VUE组件 之 高德地图地址选择

<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)
}
})
}
}, // 添加标记
addMark (map, points) {
let marker = new AMap.Marker({
map: map,
position: points,
draggable: true, // 允许拖动
cursor: 'move',
raiseOnDrag: true
})
marker.on('dragend', (e) => {
let position = marker.getPosition() // 存下坐标与地址
this.point = [position.lng, position.lat]
this.getAddress([position.lng, position.lat])
})
}, // 根据坐标返回地址(逆地理编码)
getAddress (points) {
let geocoder = new AMap.Geocoder({ radius: 1000 })
geocoder.getAddress(points, (status, result) => {
if (status === 'complete' && result.regeocode) {
this.address = result.regeocode.formattedAddress
}
})
}, commit () {
this.$emit('location', this.point, this.address)
}
}
}
</script><style lang="scss" scoped>
.map-box {
box-sizing: border-box;
background-color: #ddd;
padding: 15px;
&:after {
content: '';
display: block;
clear: both;
}
.amap, .detail {
float: left;
height: 100%;
}
.amap {
width: 75%;
}
.detail {
width: 25%;
background-color: #fff;
padding: 0 15px;
border-left: 1px solid #eee;
box-sizing: border-box;
word-wrap: break-word;
}
.btnmap {
width: 100%;
margin: 30px 0 0 0;
padding: 5px 0;
color: #fff;
cursor: pointer;
background-color: #409eff;
border: none;
border-radius: 3px;
&:hover {
background-color: #66b1ff;
}
}
}
</style>

<template>
<div class="box">
<xmap width="700px" height="500px" :lnglat="[114.433703, 30.446243]" @location="location"></xmap>
</div>
</template><script>
import xmap from '@/components/map'
export default {
components: { xmap },
methods: {
location(point, address) {
alert(`坐标：${point[0]},${point[1]} - 地址：${address}`)
}
}
}
</script>