（高德地图）marker定位 bug 解决总结

项目背景：

　　一个项目bug，项目中用到高德地图，默认打开页面会生成一个marker（下图红色icon）,然后用户拖动marker到想要的位置，并且保存。

用户反映定位不准确，在当前页面编辑的位置，到后台打开位置就会有偏移。

 

   

 

因为后台打开时候是根据经纬度生成的marker，经过检查最终确定是前台页面，拖动marker定位 获取经纬度 那里出的问题。

 

这里不得不说下个人情况，此项目是他人开发，而开发人员已经不在公司，bug转发给我了。自己之前也没怎么使用过高德，主要使用的是谷歌地图和mapbox。

在修改这个bug的时候，思绪会受谷歌api一些影响，因为一直觉得他们的api都差不多。

 

现在我打开自己的页面，然后拖动marker，拖动结束我会打印一下经纬度，然后把这个经纬度复制下来，并在高德的官方地图上去搜索获取到的这个经纬度。

结果确实一直都是有偏差的，而且还偏差值每次都不同。

 

第一个想法：

    看了下代码，发现在 生成 marker 的时候， 并没有对自定义的 icon（红色图标）设置偏移，为什么要设置偏移呢，因为我们在用这个 图标 定位的时候，

是认为这个 图标的底部箭头 指向的位置 是我们要的位置。如下图——

　　　　　　　　

    如果是用高德自带的 图标 ，图标的箭头就是指向的当前位置。而如果用自定义图标的话，默认位置是定义在图片画布的左上角 也就是left:0;top:0;如下图——

　　　　　　　　

    所以必须要为自定义图标设置偏移值，上图的 图标 大小是 宽36px 高 42px， 箭头的位置是left:18px;top:38px,所以下面设置offset偏移是-18,-38

　　　　var marker = new AMap.Marker({
            icon: new AMap.Icon({
                size:new AMap.Size(36,42),//图标大小  
                image:"/img/loc.png"
            }),
            //这里用/img/loc.png图片的left:18;top:38指向坐标
            offset: new AMap.Pixel(-18,-38),
            position: map.gaode.map.getCenter(),
            draggable:true //点标记可拖拽
        });

  这样， 当前的经纬度位置就是箭头位置。
 
  顺便这里说下谷歌地图，谷歌如果用自定义图片，定位会在图片中间最底部，如下图：
　　　　
   // 以下是谷歌的描述: By default, the anchor is located along the center point of the bottom of the image

   总之，根据图片不同，还是要考虑设置偏移值 不管是谷歌还是高德。

   偏移值设置了后，发现仍然还有偏差。然后继续思考。


第二个想法：
   其实最后发现问题很简单， 在谷歌地图上，不管怎么移动 获取到的经纬度 都是我的箭头指向的位置，

   而高德不一样，当我marker拖拽结束后 触发的“拖拽结束”事件(dragend)，获取的是鼠标位置的经纬度。
　　
   高德文档————

　　　　

    拖拽 我们的 marker 的时候，鼠标的位置是在 marker 上，但是并不一定在箭头上， 所以不管箭头指向哪里，获取到的永远是鼠标指向
  位置的经纬度，所以会有偏差。
 
   解决方法如下：

　　AMap.event.addListener(marker, 'dragging', function(e){
        var lat = e.lnglat.lat,
            lng = e.lnglat.lng;
        marker.setPosition(new AMap.LngLat(lng,lat));

    });

      拖动过程中，获取当前鼠标的位置，然后把marker定位到鼠标的位置。

      这样就解决了这个bug。

 

 结论：

     不同的地图，确实是有一些不容易发现的差异，有时候看文档，也会容易漏掉什么。

     改他人bug，确实要比改自己bug麻烦一点。