Vue组件之高德地图地址选择功能的实例代码

// 添加标记
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>

总结

以上所述是小编给大家介绍的Vue组件之高德地图地址选择功能的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！