vue使用高德地图模仿微信发送位置实现拾取坐标

高德地图实现微信定位拾取坐标

效果图：

这个拾取模式是，地图中间的这个标记不动，拖动地图，处于这个点下方的坐标即为标记点。为了考虑用户的学习成本尽量低，保持与微信一致，便于操作。

实现思路：

定位位置： 可以利用高德的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])
 }