vue高德地图标注点颜色更改

2024-06-02 07:02| 来源: 网络整理| 查看: 265

在Vue的高德地图标注点中更改颜色，可以使用AMap.Marker的setIcon方法。具体实现步骤如下：

1. 在Vue的mounted生命周期中初始化地图对象。

mounted() { this.map = new AMap.Map('map-container', { zoom: 14, center: [116.397428, 39.90923] }); // 更改样式的标注点 this.marker = new AMap.Marker({ position: new AMap.LngLat(116.397428, 39.90923), icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png' }); // 普通的标注点 this.normalMarker = new AMap.Marker({ position: new AMap.LngLat(116.407428, 39.90923), icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_a.png' }); this.map.add(this.marker); this.map.add(this.normalMarker); }

2. 创建一个方法用于更改标注点的颜色。

changeMarkerColor() { this.marker.setIcon('http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'); }

3. 在模板中添加一个按钮，当按钮被点击时执行上面创建的方法。

更改标注点颜色

4. 最后，点击更改标注点颜色按钮时，标注点将会从蓝色更改为红色。

完整示例代码如下：

更改标注点颜色 export default { name: 'App', data() { return { map: null, marker: null, normalMarker: null }; }, mounted() { this.map = new AMap.Map('map-container', { zoom: 14, center: [116.397428, 39.90923] }); // 更改样式的标注点 this.marker = new AMap.Marker({ position: new AMap.LngLat(116.397428, 39.90923), icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png' }); // 普通的标注点 this.normalMarker = new AMap.Marker({ position: new AMap.LngLat(116.407428, 39.90923), icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_a.png' }); this.map.add(this.marker); this.map.add(this.normalMarker); }, methods: { changeMarkerColor() { this.marker.setIcon('http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'); } } }

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章