如何在Google Maps地图中心（用户位置）显示CSS脉动圆点动画？

嘿，我刚好实现过类似的需求，下面给你一套完整的可落地方案，核心是用Google Maps的OverlayView来挂载我们用CSS做的脉动动画元素，精准定位到用户位置：

1. 先搞定CSS脉动动画样式 #

这部分是视觉核心，我们用CSS关键帧实现圆点的缩放+透明度变化，模拟自然的脉动效果：

/* 脉动圆点容器 */
.pulse-container {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
}

/* 中心实心圆点（标记用户精确位置） */
.pulse-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #2196F3;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* 脉动外圈（模拟扩散效果） */
.pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #2196F3;
  animation: pulse 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  z-index: 1;
}

/* 脉动动画关键帧 */
@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

2. 创建自定义Overlay挂载到地图 #

Google Maps允许我们通过OverlayView添加自定义DOM元素，这个类负责把动画元素绑定到地图坐标，并且在地图缩放、平移时自动更新位置：

// 自定义脉动Overlay类，继承Google Maps的OverlayView
class PulseOverlay extends google.maps.OverlayView {
  constructor(position, map) {
    super();
    this.position = position; // 用户位置坐标
    this.map = map;
    this.div = null;
    this.setMap(map);
  }

  // 初始化时创建DOM元素
  onAdd() {
    const div = document.createElement('div');
    div.className = 'pulse-container';
    div.innerHTML = `
      <div class="pulse-dot"></div>
      <div class="pulse-ring"></div>
    `;
    this.div = div;

    // 将元素添加到地图的overlay图层（确保在地图之上）
    const panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
  }

  // 定位DOM元素到指定经纬度
  draw() {
    const projection = this.getProjection();
    const point = projection.fromLatLngToDivPixel(this.position);

    if (point) {
      this.div.style.left = `${point.x}px`;
      this.div.style.top = `${point.y}px`;
    }
  }

  // 移除Overlay时清理DOM
  onRemove() {
    if (this.div) {
      this.div.parentNode.removeChild(this.div);
      this.div = null;
    }
  }
}

3. 初始化地图并加载用户位置 #

最后一步是初始化Google Maps，获取用户的地理坐标，然后把脉动Overlay添加到地图中心：

// 初始化地图函数
function initMap() {
  // 创建默认地图（先设个占位坐标）
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: { lat: 0, lng: 0 } // 默认坐标，会被用户位置替换
  });

  // 获取用户当前位置
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const userLatLng = new google.maps.LatLng(
          position.coords.latitude,
          position.coords.longitude
        );

        // 把地图中心移到用户位置
        map.setCenter(userLatLng);

        // 添加脉动圆点Overlay
        new PulseOverlay(userLatLng, map);
      },
      () => {
        console.error('无法获取用户位置，使用默认坐标');
        // 位置获取失败时的 fallback
        const defaultLatLng = new google.maps.LatLng(37.7749, -122.4194);
        map.setCenter(defaultLatLng);
        new PulseOverlay(defaultLatLng, map);
      }
    );
  } else {
    console.error('浏览器不支持地理定位，使用默认坐标');
    const defaultLatLng = new google.maps.LatLng(37.7749, -122.4194);
    map.setCenter(defaultLatLng);
    new PulseOverlay(defaultLatLng, map);
  }
}

// 记得在加载Google Maps API时指定回调：<script src="https://maps.googleapis.com/maps/api/js?key=你的API_KEY&callback=initMap"></script>

4. 基础HTML结构 #

需要一个承载地图的容器：

<div id="map" style="width: 100vw; height: 100vh;"></div>

小提示 #

• 地理定位需要HTTPS环境（本地开发的localhost除外）
• 可以根据需求调整CSS里的颜色、大小、动画时长，适配你的设计风格
• 确保你已经正确申请并配置了Google Maps API Key

内容的提问来源于stack exchange，提问作者Jason