高德地图实现微信定位拾取坐标
效果图:
这个拾取模式是,地图中间的这个标记不动,拖动地图,处于这个点下方的坐标即为标记点。为了考虑用户的学习成本尽量低,保持与微信一致,便于操作。
实现思路:
定位位置:
可以利用高德的getCenter和setCenter方法,先绘制一个标记点到地图中心,调好大小位置。然后再利用定位把这个图标挪到和之前的标记点重合的位置即可。
拿到坐标:
那么每次移动地图,再用getCenter这个方法拿到坐标就行了。
效果图:
代码实现:
html:
<div class="map-wrap" @mousedown="clickMousedown" @mouseup="mouseup">
<div id="map-gaode" class="map-gaode"></div>
<img class="position-img" src="/static/img/position.svg" alt="">
</div>
js:
initMap () {
// 初始化地图
map = new AMap.Map('map-gaode', {
resizeEnable: true,
zoom:13,
// crs:'EPSG4326'
})
// 初始化中心点
var nowPoint = map.getCenter()
if(this.mapCenter){
console.log(this.mapCenter,nowPoint)
nowPoint = this.mapCenter
}
this.setCenter(nowPoint)
this.setAddress(nowPoint)
// 地图侧边栏
AMap.plugin('AMap.ToolBar',function(){
//加载工具条
var toolbar = new AMap.ToolBar({
position:'LB'
});
map.addControl(toolbar)
})
// 绑定点击事件
let that = this
var clickListener = AMap.event.addListener(map, "click", function(e) {
var {lng, lat} = e.lnglat
// 设置中心点
that.setCenter(e.lnglat)
//根据经纬度地址
that.setAddress(e.lnglat)
})
//移动事件
map.on('moveend', (e)=>{
console.log('需要初始化事件')
if(that.mapSetting.input.canMove){
var nowPoint = map.getCenter()
console.log('移动结束',nowPoint.toString())
that.setCenter(nowPoint,true)
setTimeout(()=>{
that.mapSetting.input.canMove = false
},100)
}
});
}
setCenter(location,bool){
map.setCenter([location.lng, location.lat])
}