【高德地图】缩放后marker偏移,怎样移到准确位置
程序员文章站
2022-06-23 22:26:03
...
背景描述:
最近使用高德地图,做数据展示功能。用到海量点,可以查看这里
类似下图的效果:
遇到的问题:
因为将标点改成了自定义的图标,就发现标点的位置偏移了,比如,本来这个标点应该在“三亚”,但是显示在地图上时,却到了海里,放大缩小地图时,感觉标点位置也会变。
原因:
查看高德API可知,通过设置 offset 来添加偏移量,当偏移量为 (0, 0) 时,自定义图标默认以左上角为基准点。
而造成在地图上缩放,标点位置会偏差就是偏移量设置有误造成的。
我需要将标点中心位置设置在底部中间(下图黄点位置),所以将偏移量设置成(6,19)
补充:方向对应的正负,其中往下和往右移是正,往上和往左是负。
看下图:
代码如下:
<script type="text/javascript">
var style = [{
url: '/images/xx.png',//设置图片路径
anchor: new AMap.Pixel(6,19),//图标显示位置偏移量,以图标的左上角为基准点(0,0)点
size: new AMap.Size(11, 17)
}];
var mass = new AMap.MassMarks(point, { //point是海量点的数据
opacity: 1,
zIndex: 111,
cursor: 'pointer',//指定鼠标悬停时的鼠标样式
style: style
});
</script>
完毕~