0
点赞
收藏
分享

微信扫一扫

vue高德地图中修改标记点的图标形状、样式


原代码:

marker = new AMap.Marker({
position: positionItem,
zIndex: 101,
map: amapContainer,
content: '<div style="color: #fff; width: 500px;"><img src="http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" />'+markItem.plantname + "</div>",
});

效果:​​点标记-覆盖物-教程-地图 JS API | 高德地图API​​

方法一:通过修改marker中自定义显示内容中附带的图片标签来改变point标记点的形状和样式

marker = new AMap.Marker({
position: positionItem,
zIndex: 101,
map: amapContainer,
content: '<div style="color: #fff; width: 500px;"><img src="https://vdata.amap.com/icons/b18/1/2.png" />' + markItem.plantname + "</div>",
});

方法二:通过marker的icon属性来设置新的image

marker = new AMap.Marker({
position: positionItem,
zIndex: 101,
map: amapContainer,
// content: '<div style="color: #fff; width: 500px;"><img src="http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" />'+markItem.plantname + "</div>",
icon: new AMap.Icon({
size: new AMap.Size(25,25),
image: 'https://vdata.amap.com/icons/b18/1/2.png',
imageSize: new AMap.Size(20, 20)
}),//设置了没改变
});

举报

相关推荐

0 条评论