vue 高德地图上的有多个点标记 点击按钮对应的点标记跳动一下
时间: 2023-09-08 21:07:28 浏览: 153
可以通过以下步骤实现:
1. 在 Vue 中引入高德地图 API
```
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
```
2. 在 Vue 的 mounted 钩子函数中初始化地图,并添加多个点标记
```
mounted() {
// 初始化地图
this.map = new AMap.Map('mapContainer', {
center: [116.397428, 39.90923],
zoom: 13
});
// 添加点标记
this.markers = [
new AMap.Marker({
position: [116.397428, 39.90923],
map: this.map,
title: '点标记1'
}),
new AMap.Marker({
position: [116.407428, 39.90923],
map: this.map,
title: '点标记2'
})
];
}
```
3. 添加一个按钮,绑定点击事件,点击按钮时使对应的点标记跳动
```
<button @click="jumpMarker(0)">点标记1</button>
<button @click="jumpMarker(1)">点标记2</button>
```
4. 在 Vue 中定义跳动点标记的方法 jumpMarker,并在方法中设置对应的点标记的 animation 属性为 AMap.Marker.Animation.BOUNCE
```
methods: {
jumpMarker(index) {
this.markers[index].setAnimation(AMap.Marker.Animation.BOUNCE);
}
}
```
这样,当点击对应的按钮时,对应的点标记就会跳动一下。