一些朋友在往地图上添加标注的时候,往往会发现,图片的尖尖角对不上具体的点。比如,我要在上海东方明珠上扎一个点。
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,这样子,标注的尖尖角就完美地对准了东方明珠