vue 高德地图 点标记 点击跳动一下
时间: 2023-07-13 07:06:39 浏览: 240
vue中实现高德定位功能
实现点击点标记后跳动的效果,可以使用高德地图 JavaScript API 中提供的Marker对象的setAnimation方法。
具体实现步骤如下:
1. 创建Marker对象时,设置marker的animation属性为AMAP_ANIMATION_DROP或AMAP_ANIMATION_BOUNCE,分别表示掉落和跳动的动画效果。
2. 给Marker对象添加click事件监听器,在监听器中调用setAnimation方法,将animation设置为AMAP_ANIMATION_BOUNCE,使其跳动。
3. 在跳动结束后,再次调用setAnimation方法,将animation设置为null,停止跳动。
示例代码如下:
```
// 创建Marker对象
var marker = new AMap.Marker({
position: [lng, lat],
animation: AMap.MarkerAnimation.BOUNCE // 初始动画效果为跳动
});
// 给Marker对象添加click事件监听器
marker.on('click', function() {
if (marker.getAnimation() === null) { // 判断是否已经跳动
marker.setAnimation(AMap.MarkerAnimation.BOUNCE); // 开始跳动
setTimeout(function() { // 跳动2秒后停止
marker.setAnimation(null);
}, 2000);
}
});
// 将Marker对象添加到地图上
map.add(marker);
```
以上代码中,如果Marker对象尚未跳动,那么点击后将开始跳动,并在2秒后停止;如果Marker对象已经在跳动中,那么点击后不会有任何效果。
阅读全文