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 更新」——数据驱动、状态可控、性能稳健，为车队监控等实时场景提供可靠支撑。