实现高德地图自定义点标记跳动，点标记随缩放大小显示和隐藏

 高德地图的自定义标记（Marker）添加一个循环动画效果，比如让图标上下跳动，你可以利用 CSS 动画或 JavaScript 动画库（如GSAP）。使用 GSAP 来创建动画，下面我将展示两种GSAP 和 CSS 类来为 Marker 的内容添加循环动画。

方法一：通过CSS 动画实现图标上下跳动

首先自定义点标记，在点标记显示内容content中自定义一个图标，这里我用的是element中的图标，给标签一个类名，如i-icon

      //自定义点标记
      this.markers = this.dataList.map((item)=>{
        return new AMap.Marker({
          position: new AMap.LngLat(item.lng, item.lat),
          title: item.name,
          cursor: "pointer",
          content: `
           <div>
             <i class="el-icon-location-outline i-icon" ></i>
             <div class="icontext">${item.name}</div>
           </div>`,
        });
      })

然后在样式中添加动画

::v-deep .i-icon{
  display: flex;
  justify-content: center;
  font-size: 2rem;
  color: #f06b0c;
  /* 应用动画的类 */
  animation: bounce 1.5s infinite ease-in-out; /* 1秒完成一次跳跃，无限重复 */
}
::v-deep .icontext{
  width: 60px;
}
/* 跳动动画 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px); /* 调整这个值以改变跳动高度 */
  }
  60% {
    transform: translateY(-8px);
  }
}

方法二：使用 GSAP 来创建动画

首先下载依赖

npm install gsap   

导入依赖

import { gsap } from 'gsap';

还是和上述方法一中一样，先自定义点标记。在初始化地图this.initAMap();后添加 GSAP 来创建动画。

  mounted() {
    this.initAMap();
    // 加跳动动画
    setTimeout(() => {
      gsap.to('.i-icon', { // class类名
          'margin-top': -20, // 上下跳动高度
          duration: 0.5, // 动画持续多长时间
          repeat: -1, // 动画重复的次数。-1为无限重复
          yoyo: true, // 如果为true，则每次重复播放都会前后交替进行
        });
    }, 500);
  },

点标记随缩放大小显示和隐藏

通过markers来存储所有自定义点标记，方便后续遍历循环点标记数组

  data() {
    return {
      map: null,// 地图实例
      // 数据列表
      dataList: [        
        {name: '点标记1', lng: 119.608580, lat: 31.476989},
        {name: '点标记2', lng: 119.577580, lat: 31.477989},
        {name: '点标记3', lng: 119.591580, lat: 31.476189},
        {name: '点标记4', lng: 119.594580, lat: 31.461989}],
      markers: [],// 地图标点数组
    }
  },

在初始化地图时，监听地图缩放事件，根据缩放级别隐藏或显示点标记。

    initAMap() {
      AMapLoader.load({
        key: "你自己的密钥", 
        version: "2.0",
      }).then((AMap) => {
          this.map = new AMap.Map("Map", {
            viewMode: "3D",
            zoom: 13, 
            center: [119.598580, 31.476989], 
            terrain: true,
            mapStyle: "amap://styles/darkblue", 
          });
          // 监听地图缩放事件，根据缩放级别隐藏或显示点标记
          this.map.on('zoomend',()=>{
            if(this.map.getZoom()< 11){
              // 遍历点标记数组，隐藏点标记
              this.markers.forEach((marker) => {
                marker.hide();
              });
            }else{
              // 遍历点标记数组，显示点标记
              this.markers.forEach((marker) => {
                marker.show();
              });
            }
          });
          this.MoreMark();
      }).catch(e => {
        console.log(e);
      })
    },

完整代码如下

<template>
  <div id="Map" style="height:770px; width: 100%"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { gsap } from 'gsap';
export default {
  data() {
    return {
      map: null,// 地图实例
      // 数据列表
      dataList: [        
        {name: '点标记1', lng: 119.608580, lat: 31.476989},
        {name: '点标记2', lng: 119.577580, lat: 31.477989},
        {name: '点标记3', lng: 119.591580, lat: 31.476189},
        {name: '点标记4', lng: 119.594580, lat: 31.461989}],
      markers: [],// 地图标点数组
    }
  },
  mounted() {
    this.initAMap();
    // 方法二，加跳动动画
    setTimeout(() => {
      gsap.to('.i-icon', { // class
          'margin-top': -20, // 上下跳动高度
          duration: 0.5, // 动画持续多长时间
          repeat: -1, // 动画重复的次数。-1为无限重复
          yoyo: true, // 如果为true，则每次重复播放都会前后交替进行
        });
    }, 500);
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "你自己的密钥", 
        version: "2.0",
      }).then((AMap) => {
          this.map = new AMap.Map("Map", {
            viewMode: "3D",
            zoom: 13, 
            center: [119.598580, 31.476989], 
            terrain: true,
            mapStyle: "amap://styles/darkblue", 
          });
          // 监听地图缩放事件，根据缩放级别隐藏或显示点标记
          this.map.on('zoomend',()=>{
            if(this.map.getZoom()< 11){
              // 遍历点标记数组，隐藏点标记
              this.markers.forEach((marker) => {
                marker.hide();
              });
            }else{
              // 遍历点标记数组，显示点标记
              this.markers.forEach((marker) => {
                marker.show();
              });
            }
          });
          this.MoreMark();
      }).catch(e => {
        console.log(e);
      })
    },
    MoreMark(){
      //自定义点标记
      this.markers = this.dataList.map((item)=>{
        return new AMap.Marker({//自定义点标记
          position: new AMap.LngLat(item.lng, item.lat),
          title: item.name,
          cursor: "pointer",
          content: `
           <div>
             <i class="el-icon-location-outline i-icon" ></i>
             <div class="icontext">${item.name}</div>
           </div>`,
        });
      })
      this.markers.forEach((marker) => {
        this.map.add(marker);
      });
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .i-icon{
  display: flex;
  justify-content: center;
  font-size: 2rem;
  color: #f06b0c;
  /* 方法一，应用动画的类 */
  // animation: bounce 1.5s infinite ease-in-out; /* 1秒完成一次跳跃，无限重复 */
}
::v-deep .icontext{
  width: 60px;
}
/* 跳动动画 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px); /* 调整这个值以改变跳动高度 */
  }
  60% {
    transform: translateY(-8px);
  }
}
</style>