（高德地图）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麻烦一点。