vue 高德地图 点标记 鼠标悬浮 跳动一下

可以通过给点标记添加自定义动画效果来实现鼠标悬浮时跳动一下的效果。具体实现方法如下：

1. 在创建点标记时，设置点标记的自定义动画效果，例如：

let marker = new AMap.Marker({
  position: [lng, lat],
  animation: 'AMAP_ANIMATION_BOUNCE' // 设置动画效果为弹跳
});

2. 监听点标记的 mouseover 和 mouseout 事件，分别触发动画效果和停止动画效果，例如：

// 鼠标悬浮时触发动画效果
marker.on('mouseover', function() {
  marker.setAnimation('AMAP_ANIMATION_BOUNCE');
});

// 鼠标移开时停止动画效果
marker.on('mouseout', function() {
  marker.setAnimation(null);
});

这样就可以实现鼠标悬浮时点标记跳动一下的效果了。注意，`AMAP_ANIMATION_BOUNCE` 是高德地图 API 中提供的一种动画效果，还可以根据需求选择其他的动画效果。

相关问题

vue 高德地图 点标记 点击跳动一下

要让 Vue 中的高德地图点标记点击后跳动一下，可以利用高德地图 JavaScript API 的 Marker 类和 Animation 类来实现。

首先，在 Vue 中引入高德地图 JavaScript API：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

然后，在 Vue 组件中创建地图和点标记：

<template>
  <div ref="mapContainer" style="height: 400px;"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      marker: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new window.AMap.Map(this.$refs.mapContainer, {
        center: [116.397428, 39.90923],
        zoom: 13
      });
      this.marker = new window.AMap.Marker({
        position: [116.397428, 39.90923],
        map: this.map,
        animation: 'AMAP_ANIMATION_DROP'
      });
      this.marker.on('click', () => {
        this.marker.setAnimation('AMAP_ANIMATION_BOUNCE');
      });
    }
  }
};
</script>

在上面的代码中，首先在 mounted 钩子函数中调用 initMap 方法创建地图和点标记。在 initMap 方法中，我们通过创建 AMap.Map 实例来创建地图，并且通过创建 AMap.Marker 实例来创建点标记。在创建点标记的时候，我们设置了 animation 属性为 AMAP_ANIMATION_DROP，这样点标记就会在创建时从天上掉下来。然后通过监听点标记的 click 事件，在回调函数中设置 animation 属性为 AMAP_ANIMATION_BOUNCE，这样点标记就会跳动起来。

注意，要让点标记跳动起来，需要在创建点标记时设置 animation 属性为 AMAP_ANIMATION_BOUNCE。另外，在改变点标记的动画效果时，需要通过 setAnimation 方法来设置。

vue高德地图自定义标记

Vue高德地图自定义标记可以通过以下步骤进行：

1. 引入高德地图JavaScript API

在Vue组件的script标签中引入高德地图JavaScript API，例如：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>

其中key为你的高德地图开发者账号的应用key。

2. 定义地图容器

在Vue组件的template标签中定义地图容器，例如：

<template>
  <div id="map-container"></div>
</template>

其中id为map-container的div元素用于承载地图。

3. 初始化地图对象

在Vue组件的script标签中，通过AMap.Map类初始化地图对象，例如：

<script>
export default {
  mounted() {
    const map = new AMap.Map('map-container', {
      zoom: 13,
      center: [116.397428, 39.90923]
    });
  }
}
</script>

其中zoom表示地图缩放级别，center表示地图中心点坐标。

4. 自定义标记图标

在Vue组件的script标签中，通过AMap.Icon类定义自定义标记图标，例如：

<script>
export default {
  mounted() {
    const icon = new AMap.Icon({
      size: new AMap.Size(50, 50),
      image: 'https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',
      imageSize: new AMap.Size(50, 50)
    });
  }
}
</script>

其中size表示标记图标尺寸，image表示标记图标图片地址，imageSize表示标记图标显示尺寸。

5. 添加自定义标记

在Vue组件的script标签中，通过AMap.Marker类添加自定义标记，例如：

<script>
export default {
  mounted() {
    const map = new AMap.Map('map-container', {
      zoom: 13,
      center: [116.397428, 39.90923]
    });
    const icon = new AMap.Icon({
      size: new AMap.Size(50, 50),
      image: 'https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',
      imageSize: new AMap.Size(50, 50)
    });
    const marker = new AMap.Marker({
      position: [116.397428, 39.90923],
      icon: icon,
      offset: new AMap.Pixel(-25, -25)
    });
    marker.setMap(map);
  }
}
</script>

其中position表示标记位置坐标，icon表示标记图标，offset表示标记图标偏移量。

6. 完整代码

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    const map = new AMap.Map('map-container', {
      zoom: 13,
      center: [116.397428, 39.90923]
    });
    const icon = new AMap.Icon({
      size: new AMap.Size(50, 50),
      image: 'https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',
      imageSize: new AMap.Size(50, 50)
    });
    const marker = new AMap.Marker({
      position: [116.397428, 39.90923],
      icon: icon,
      offset: new AMap.Pixel(-25, -25)
    });
    marker.setMap(map);
  }
}
</script>