地图缩放后Marker偏移的问题

Posted 2020-08-13 iStream

最近在做地图开发，遇到一个小坑，记录在这里。

按照高德地图的文档，初始化Marker(图标)并将其放置到地图上，示例如下：

 

var marker = new AMap.Marker({
  icon: "http://www.easyicon.net/api/resizeApi.php?id=1185658&size=32",
  position: [120.1, 30.1]
});

本以为就可以这样简简单单地完成了，结果却发现当地图缩放的时候，图标会有一个偏移。例如当地图缩放比例很大的时候，某个图标在大桥左侧，放大之后却到了大桥的右侧。

百思不得其解之中，只能继续查看高德的官方文档，终于在这个页面找到了答案。
http://lbs.amap.com/api/javascript-api/guide/draw-on-map/marker-point/

 

原来高德对图标默认做了一个(-10,-34)的位移(以地图左上角为原点)，在不设置其他数值的情况下，图标左侧边缘位于标识点左侧10px的位置上。我项目中使用的图标视觉上都是把图标左下角当做标识点的，所以当地图缩放比例很大的时候，10px对应的实际距离很大，也就是看上去会认为标识点发生了很大的向左的偏移。当地图放大后，10px对应的实际距离就小了，向左的偏移就没有那么大了。实际的感官就是标识点在放大过程中向右移动了(实质上都是偏左，只不过地图放大之后偏左没有那么多了)。

搞清楚原因之后，解决起来就很简单了，只要在AMap.Marker初始化的时候添加offset属性即可。我的图标大小为26*26px，需要对齐图标左下角，所以将offset设置成AMap.Pixel(0,-26)，问题顺利解决。