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

背景描述:

最近使用高德地图,做数据展示功能。用到海量点,可以查看这里
类似下图的效果:
在这里插入图片描述

遇到的问题:

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

原因:

查看高德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>

完毕~

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值