首页 > 代码库 > 地图缩放后Marker偏移的问题
地图缩放后Marker偏移的问题
最近在做地图开发,遇到一个小坑,记录在这里。
按照高德地图的文档,初始化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),问题顺利解决。
地图缩放后Marker偏移的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。