最近在做地图开发,遇到一个小坑,记录在这里。
按照高德地图的文档,初始化Marker(图标)并将其放置到地图上,示例如下:
var marker = new AMap.Marker({
icon: "http://www.easyicon.net/api/resizeApi.php?id=1185658&size=32",
position: [120.1, 30.1]
});
本以为就可以这样简简单单地完成了,结果却发现当地图缩放的时候,图标会有一个偏移。例如当地图缩放比例很大的时候,某个图标在大桥左侧,放大之后却到了大桥的右侧。
百思不得其解之中,只能继续查看高德的官方文档,终于在这个页面找到了答案。
链接
原来高德对图标默认做了一个(-10,-34)的位移(以地图左上角为原点),在不设置其他数值的情况下,图标左侧边缘位于标识点左侧10px的位置上。我项目中使用的图标视觉上都是把图标左下角当做标识点的,所以当地图缩放比例很大的时候,10px对应的实际距离很大,也就是看上去会认为标识点发生了很大的向左的偏移。当地图放大后,10px对应的实际距离就小了,向左的偏移就没有那么大了。实际的感官就是标识点在放大过程中向右移动了(实质上都是偏左,只不过地图放大之后偏左没有那么多了)。
搞清楚原因之后,解决起来就很简单了,只要在AMap.Marker初始化的时候添加offset属性即可。我的图标大小为26*26px,需要对齐图标左下角,所以将offset设置成AMap.Pixel(0,-26),问题顺利解决。