vue 高德地图上的有多个点标记 点击按钮对应的点标记跳动一下
时间: 2023-09-08 18:07:28 浏览: 70
要实现这个功能,你需要先引入高德地图的JavaScript API和Vue.js框架。然后,在Vue组件中,你可以使用高德地图JavaScript API提供的Marker对象来创建多个点标记,并将它们添加到地图上。
接着,你可以为每个点标记添加一个唯一的标识符,并将其存储在Vue组件的数据中。当用户点击按钮时,你可以根据按钮所对应的标识符,找到相应的点标记对象,并调用它的setAnimation方法来让它跳动一下。
下面是一个示例代码,你可以根据自己的需求进行修改和扩展:
```html
<template>
<div>
<div id="map"></div>
<button v-for="marker in markers" :key="marker.id" @click="animateMarker(marker.id)">
{{ marker.name }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
markers: [
{ id: 1, name: 'Marker 1', lnglat: [116.397428, 39.90923] },
{ id: 2, name: 'Marker 2', lnglat: [116.397, 39.908] },
{ id: 3, name: 'Marker 3', lnglat: [116.398, 39.907] }
]
}
},
mounted() {
// 初始化地图
this.map = new AMap.Map('map', {
center: [116.397428, 39.90923],
zoom: 13
})
// 创建点标记并添加到地图上
this.markers.forEach(marker => {
const markerObj = new AMap.Marker({
position: marker.lnglat,
map: this.map
})
marker.obj = markerObj // 将点标记对象存储在数据中
})
},
methods: {
animateMarker(id) {
const marker = this.markers.find(m => m.id === id)
if (marker) {
marker.obj.setAnimation('AMAP_ANIMATION_BOUNCE') // 让点标记跳动一下
}
}
}
}
</script>
```
在这个示例中,我们首先在Vue组件的数据中定义了三个点标记,每个点标记都有一个唯一的id和一个name属性,以及经纬度坐标lnglat。
在组件的mounted钩子函数中,我们使用高德地图JavaScript API创建了一个地图,并为每个点标记创建了一个Marker对象,并将其添加到地图上。同时,我们还将每个点标记对象存储在对应的数据对象中。
最后,我们在组件的methods中定义了一个animateMarker方法,当用户点击按钮时,它会根据按钮所对应的id找到相应的点标记对象,并让它跳动一下。
注意,在实际使用中,你需要将高德地图JavaScript API的key替换为你自己的key。另外,为了让代码更加模块化和可维护,你可以将地图和点标记的创建逻辑封装成单独的组件或工具类。
相关推荐
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)