欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【高德地图】缩放后marker偏移,怎样移到准确位置

程序员文章站 2022-06-23 22:26:03
...

背景描述:

最近使用高德地图,做数据展示功能。用到海量点,可以查看这里
类似下图的效果:
【高德地图】缩放后marker偏移,怎样移到准确位置

遇到的问题:

因为将标点改成了自定义的图标,就发现标点的位置偏移了,比如,本来这个标点应该在“三亚”,但是显示在地图上时,却到了海里,放大缩小地图时,感觉标点位置也会变。

原因:

查看高德API可知,通过设置 offset 来添加偏移量,当偏移量为 (0, 0) 时,自定义图标默认以左上角为基准点
而造成在地图上缩放,标点位置会偏差就是偏移量设置有误造成的。
我需要将标点中心位置设置在底部中间(下图黄点位置),所以将偏移量设置成(6,19)

补充:方向对应的正负,其中往下和往右移是正,往上和往左是负。

看下图:
【高德地图】缩放后marker偏移,怎样移到准确位置

代码如下:

<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>

完毕~