Google Maps API 实时刷新车辆标记位置的完整实现教程

本文详解如何通过定时轮询 json 数据源并动态更新 google maps 标记（marker），解决因未同步最新 gps 位置导致标记无法重绘的问题，涵盖数据更新、旧标记清理、新标记渲染及事件绑定的最佳实践。

在使用 Google Maps JavaScript API 展示实时车辆位置时，一个常见误区是：仅重复调用数据获取函数，却未将返回的新数据同步到全局状态中。你当前的代码中 setInterval(fetchAPI, 5000) 确实每 5 秒发起请求，但 fetchAPI 返回的 Promise 结果并未被赋值给 data 变量——因此 setMarker() 始终使用的是初始化时的旧数据，导致地图标记“静止不动”。

✅ 正确做法：统一数据流 + 显式清理 + 动态重绘

首先，修正 fetchAPI，确保每次请求后更新 data：

let data = null; // 初始化为 null，避免未定义引用

const fetchAPI = async () => {
  try {
    const response = await fetch('./cradlepoint.json');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const locations = await response.json();
    data = locations; // ✅ 关键：显式更新全局 data
    console.log('✅ 数据已更新，共', data?.data?.length || 0, '辆车辆');
  } catch (err) {
    console.error('❌ 获取位置数据失败:', err);
  }
};

其次，必须清除旧标记，否则每 5 秒都会叠加新标记，造成内存泄漏与视觉混乱。推荐使用 Marker 实例数组管理：

let markers = []; // 存储所有活跃 Marker 实例

function clearMarkers() {
  markers.forEach(marker => marker.setMap(null));
  markers = [];
}

function setMarker() {
  if (!data || !Array.isArray(data.data) || data.data.length === 0) {
    console.warn('⚠️ 无有效车辆数据，跳过渲染');
    return;
  }

  clearMarkers(); // ✅ 每次重绘前先清空

  const busicon = "https://maps.google.com/mapfiles/ms/icons/bus.png";
  const infoWindow = new google.maps.InfoWindow();

  data.data.forEach(vehicle => {
    const { id, latitude, longitude } = vehicle;

    // 防御性检查坐标有效性
    if (typeof latitude !== 'number' || typeof longitude !== 'number') return;

    const marker = new google.maps.Marker({
      map: map,
      position: { lat: latitude, lng: longitude },
      icon: busicon,
      title: id,
      // 可选：添加 zIndex 提升点击优先级
      zIndex: 100 + Math.random() // 避免图层堆叠干扰
    });

    // 绑定点击事件（注意：闭包中使用 vehicle.id 更安全）
    marker.addListener('click', () => {
      infoWindow.close();
      infoWindow.setContent(`车辆 ID：${id}

                             位置：${latitude.toFixed(6)}, ${longitude.toFixed(6)}`);
      infoWindow.open(map, marker);
    });

    markers.push(marker); // ✅ 记录实例，便于后续清理
  });
}

最后，整合初始化与定时任务逻辑（注意：initMap 是异步函数，需正确等待）：

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { Marker } = await google.maps.importLibrary("marker");

  map = new Map(document.getElementById("map"), {
    mapId: "YOUR_MAP_ID",
    center: { lat: 37.7749, lng: -122.4194 }, // 示例坐标
    zoom: 14,
  });

  // 首次加载数据并渲染
  await fetchAPI();
  setMarker();

  // 启动定时器：先拉取再渲染（确保数据就绪）
  setInterval(async () => {
    await fetchAPI(); // ✅ 等待数据更新完成
    setMarker();     // ✅ 再执行渲染
  }, 5000);
}

// 启动地图
initMap();

⚠️ 重要注意事项

• 避免 setInterval 嵌套异步风险：不要直接 setInterval(setMarker, 5000)，因为 setMarker 依赖 data，而 data 的更新是异步的；务必用 await fetchAPI() 保证顺序。
• 错误处理不可省略：网络中断或 JSON 格式错误会导致 data 为 undefined，setMarker 中需做空值/数组校验。
• 性能优化建议：
  • 若车辆数量庞大（>100），考虑使用 MarkerClusterer 聚合标记；
  • 对高频更新场景（如秒级），改用 WebSocket 或 Server-Sent Events（SSE）替代轮询；
  • 使用 google.maps.LatLngBounds().extend() 动态调整地图视野，聚焦所有车辆。

通过以上结构化改造，你的地图即可稳定、高效、可维护地实现车辆位置的实时刷新——数据驱动视图，状态清晰可控。