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

背景描述:

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

遇到的问题:

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

原因:

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

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

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

代码如下:

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

完毕~

你可能感兴趣的:(高德地图,javascript,html)