Google Maps API 实时刷新标记位置的完整实现教程_技术教程

本文详解如何在 google maps javascript api 中动态更新车辆标记位置：通过定时拉取 json 数据、更新全局数据变量、清除旧标记并重绘新标记，实现地图上车辆位置的实时刷新。

要在 Google Maps 上实现车辆标记（Marker）随 GPS 数据实时更新，仅轮询获取新数据是不够的——必须确保新数据被正确赋值给地图渲染逻辑所依赖的状态变量，并主动管理标记的生命周期（清除旧标记 + 绘制新标记）。否则，即使 fetchAPI 每 5 秒成功获取最新 JSON，setMarker() 仍会反复使用初始加载的旧 data，导致地图显示停滞。

✅ 正确的数据流设计

首先，修正核心问题：data 变量必须被异步更新。原代码中 setInterval(fetchAPI, 5000) 仅执行请求，但未将响应结果写回 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);
  }
};

⚠️ 注意：await 不能直接用于顶层作用域（如 let data = await fetchAPI()），因此需在 initMap() 内部首次调用，或改用 IIFE。

✅ 清除旧标记 + 重绘新标记（避免内存泄漏与重叠）

setMarker() 函数当前每次执行都会新建 Marker 实例，但未移除之前创建的标记，长期运行将导致成百上千个隐藏标记堆积，严重拖慢性能并造成 UI 错乱。推荐方案：维护一个 markers 数组，每次更新前先关闭 InfoWindow 并从地图移除所有旧标记。

let map;
let markers = []; // ✅ 存储所有活跃标记的引用
let infoWindow;

async function initMap() {
  const { Map, InfoWindow, Marker } = await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker"); // 确保 marker 库已加载

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

  infoWindow = new InfoWindow();

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

  // 启动定时器：每 5 秒刷新数据 & 重绘标记
  setInterval(async () => {
    await fetchAPI();   // ✅ 先更新 data
    setMarkers();       // ✅ 再重绘
  }, 5000);
}

function setMarkers() {
  // ✅ 1. 清除所有现有标记
  markers.forEach(marker => marker.setMap(null));
  markers = [];

  // ✅ 2. 安全检查 data 结构
  if (!data || !Array.isArray(data.data)) {
    console.warn('⚠️ 跳过渲染：data.data 不存在或非数组');
    return;
  }

  const busicon = "https://maps.google.com/mapfiles/ms/icons/bus.png";

  // ✅ 3. 创建新标记并绑定事件
  data.data.forEach(vehicle => {
    if (typeof vehicle.latitude !== 'number' || typeof vehicle.longitude !== 'number') return;

    const marker = new google.maps.Marker({
      map,
      position: { lat: vehicle.latitude, lng: vehicle.longitude },
      icon: busicon,
      title: `ID: ${vehicle.id}`,
      vehicleId: vehicle.id // 自定义属性，便于调试
    });

    // 点击事件：复用同一个 infoWindow（最佳实践）
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(`车辆 ID: ${vehicle.id}

                             位置: ${vehicle.latitude.toFixed(5)}, ${vehicle.longitude.toFixed(5)}`);
      infoWindow.open(map, marker);
    });

    markers.push(marker); // ✅ 保存引用供下次清除
  });
}

✅ 补充建议与注意事项

防抖与错误降级：生产环境建议添加请求节流（如失败后指数退避）、空数据兜底提示（如显示“暂无车辆在线”覆盖层）。
性能优化：若车辆数超百，考虑使用 MarkerClusterer 聚合标记；或改用 DataLayer 批量渲染。
JSON 格式校验：确保 ./cradlepoint.json 始终返回标准结构，例如：
```
{ "data": [{ "id": "BUS-001", "latitude": 37.775, "longitude": -122.418 }] }
```
CORS 与缓存：本地开发时 Chrome 可能因 file:// 协议拒绝 fetch；部署到 HTTP 服务（如 http-server 或 Nginx）并设置 Cache-Control: no-cache 头，防止浏览器缓存旧 JSON。

通过以上改造，你的地图即可真正实现「秒级响应 GPS 更新」——数据驱动、状态可控、性能稳健，为车队监控等实时场景提供可靠支撑。