（⾼德地图）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.Center(),
draggable:true//点标记可拖拽
});
海曼明斯基这样，当前的经纬度位置就是箭头位置。
顺便这⾥说下⾕歌地图，⾕歌如果⽤⾃定义图⽚，定位会在图⽚中间最底部，如下图：
// 以下是⾕歌的描述: By default, the anchor is located along the center point of the bottom of the image
总之，根据图⽚不同，还是要考虑设置偏移值不管是⾕歌还是⾼德。
偏移值设置了后，发现仍然还有偏差。然后继续思考。
第⼆个想法：
其实最后发现问题很简单，在⾕歌地图上，不管怎么移动获取到的经纬度都是我的箭头指向的位置，
⽽⾼德不⼀样，当我marker拖拽结束后触发的“拖拽结束”事件(dragend)，获取的是⿏标位置的经纬度。
⾼德⽂档————
BLK222
拖拽我们的 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⿇烦⼀点。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议