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

最新推荐文章于 2025-01-16 17:30:06 发布

_小郑有点困了

最新推荐文章于 2025-01-16 17:30:06 发布

阅读量2.1k

点赞数 1

分类专栏：高德地图 vue 文章标签：微信高德地图坐标拾取

本文链接：https://blog.csdn.net/qq_44706619/article/details/121226245

版权

vue 同时被 2 个专栏收录

81 篇文章

订阅专栏

高德地图

6 篇文章

订阅专栏

这篇博客介绍了如何在高德地图中实现与微信定位一致的坐标拾取功能。通过利用高德地图的getCenter和setCenter方法，以及监听地图的移动事件，能够在用户拖动地图时实时获取并更新中心点坐标。同时，通过在地图上添加标记并调整，确保了用户体验与微信类似，降低了学习成本。在代码实现部分，展示了HTML和JavaScript的结合使用，包括地图初始化、点击和移动事件的绑定，以及坐标获取和设置的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果图：

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

在这里插入图片描述

实现思路：

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