高德地图缩放marker位置变化,及设置offset偏移

一些朋友在往地图上添加标注的时候,往往会发现,图片的尖尖角对不上具体的点。比如,我要在上海东方明珠上扎一个点。

var marker = new AMap.Marker({ //添加自定义点标记
        map: map,
        position: [121.499809,31.239666], //基点位置
        offset: new AMap.Pixel(0, 0), //相对于基点的偏移位置
        draggable: true,  //是否可拖动
        content: '<img src="marker_3.png" />'   //自定义点标记覆盖物内容
    });

为了方便查看,我在标注图外面加了一个圈,可以看到,图片的左上角对准了基点位置,而且缩小地图后图标会移动更大的位置是因为高德地图初始化的时候会有一个偏移量

 所以,我们需要设置offset,也就是偏移,来让标注的尖尖角对准东方明珠。图片的尺寸是128*128,我们先把偏移设置成-128,-128,意思是往左走,往上走。代码如下:

var marker2 = new AMap.Marker({ //添加自定义点标记
        map: map,
        position: [121.499809,31.239666], //基点位置
        offset: new AMap.Pixel(-128, -128), //相对于基点的偏移位置
        draggable: true,  //是否可拖动
        content: '<img src="marker_3.png" />'   //自定义点标记覆盖物内容
    });

 所以需要按照你的图标大小设置偏移量-64,-128,这样子,标注的尖尖角就完美地对准了东方明珠

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值