高德地图纠偏 php,高德地图开发中,缩放后Marker偏移的问题

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

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

var marker = new AMap.Marker({

icon: "http://www.easyicon.net/api/resizeApi.php?id=1185658&size=32",

position: [120.1, 30.1]

});

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

百思不得其解之中,只能继续查看高德的官方文档,终于在这个页面找到了答案。

链接

687474703a2f2f6f6637387633616d382e626b742e636c6f7564646e2e636f6d2f323031362d31302d31382d616d61702d6f66667365742e706e67

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值