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

Posted 2021-12-28 尔嵘

原代码：

 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) 
    ),//设置了没改变
);