Vue3使用百度地图marker点位实现水波纹动效

1、点击按钮进行跳转方法，并创建marker

const handlePositionClick = (row: any) => {
  // 全部清除地图上的覆盖物
  map.value.clearOverlays();

  // 处理点击事件，'row' 包含点击行的数据
  console.log('handlePositionClick:', row);
  const locationString = row.alarmPointLocation; // 假设是 "latitude,longitude" 格式
  const [latitude, longitude] = locationString.split(',');
  // 使用解析后的经纬度创建 BMapGL.Point
  const targetLocation = new BMapGL.Point(parseFloat(latitude), parseFloat(longitude));

  // 创建自定义图标
  const customIcon = new BMapGL.Icon(positionRed, new BMapGL.Size(24, 24)); // 调整图标路径和大小

  // 使用自定义图标创建标记
  const marker = new BMapGL.Marker(targetLocation, { icon: customIcon });

  // 将标记添加到地图上
  map.value.addOverlay(marker);
  // 移动地图中心到目标位置
  map.value.centerAndZoom(targetLocation, 18);

  // 添加三个容器，在这两个容器上增加动画效果
  let divElement = document.createElement('div');
  divElement.className = 'before';
  let divElement2 = document.createElement('div');
  divElement2.className = 'circleOne';
  let divElement3 = document.createElement('div');
  divElement3.className = 'circleTwo';
  let divElement4 = document.createElement('div');
  divElement4.className = 'circleThree';
  marker.domElement.innerHtml = marker.domElement.childNodes[0];
  marker.domElement.appendChild(divElement);
  marker.domElement.appendChild(divElement2);
  marker.domElement.appendChild(divElement3);
  marker.domElement.appendChild(divElement4);
  marker.domElement.className = '';
  marker.domElement.className = 'dot';
  marker.domElement.style.overflow = '';
  marker.domElement.firstChild.style.position = 'relative';
  marker.domElement.firstChild.style.zIndex = '5';
};

2、CSS动画效果样式

<style>
.dot {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 50;
}

.dot:hover {
  z-index: 100;
}

/* 内环  */
.dot > .before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: transparent;
  z-index: 2;
  animation: color1 1.5s ease-out;
  animation-iteration-count: infinite;
}

/* 产生动画（向外扩散变大）的圆圈  */
.dot > .circleOne {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  left: -2px;
  top: -3px;
  border: 1px solid #f31010;
  background: rgba(243, 16, 16, 0.9);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  animation: color2 1.5s ease-out;
  animation-iteration-count: infinite;
}

.dot > .circleTwo {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  left: -12px;
  top: -13px;
  border: 1px solid #f31010;
  background: rgba(243, 16, 16, 0.7);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  animation: color2 1.5s ease-out;
  animation-iteration-count: infinite;
}


.dot > .circleThree {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  left: -22px;
  top: -22px;
  border: 1px solid #f31010;
  background: rgba(243, 16, 16, 0.7);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  animation: color2 1.5s ease-out;
  animation-iteration-count: infinite;
}

/* 产生动画（向外扩散变大）的圆圈  */

// 动画效果
@keyframes color1 {
  0% {
    transform: scale(0.1);
    opacity: 0.5;
  }
  25% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 0.5;
  }
  75% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes color2 {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  25% {
    transform: scale(0.5);
    opacity: 0.2; /* 提高起始透明度 */
  }
  50% {
    transform: scale(1);
    opacity: 0.5;
  }
  75% {
    transform: scale(1.5);
    opacity: 0.2; /* 降低结束透明度 */
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}


.dot > div {
  z-index: 3;
  top: 0;
  left: 0;
}


</style>

3、完美的水波纹动效，beautiful！