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

Posted 尔嵘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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) 
    ),//设置了没改变
);

以上是关于vue高德地图中修改标记点的图标形状样式的主要内容,如果未能解决你的问题,请参考以下文章

百度地图,怎么可以显示图标的呢??

vue高德地图 如何一次添加多个点标记到地图实例?

百度地图api设置点的图标不显示

Flutter 通过后台截图生成图片的方式实现高德地图变更maker图标颜色和size

vue2(webpack)调用amap高德地图及其UI组件和标记物

高德地图自定义图标的点标记Marker--初体验