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() 动态调整地图视野，聚焦所有车辆。

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