Google Maps API标记位置自动刷新问题求助

核心问题修复：更新全局data变量 #

你当前的setInterval(fetchAPI,5000)只是重复调用了获取数据的函数，但没有将新获取的结果赋值给全局的data变量。因为fetchAPI是异步函数，需要在定时器内部处理异步逻辑，把返回值更新到data：

// 替换原来的setInterval调用
setInterval(async () => {
  data = await fetchAPI();
}, 5000);

必须补充：清除旧标记避免重复绘制 #

如果不清除旧标记，每次调用setMarker都会在地图上新增一批标记，导致标记堆积。你需要维护一个存储所有标记的数组，每次重绘前先移除旧标记：

修改后的完整代码 #

const fetchAPI = async () => {
  const url = './cradlepoint.json';
  const response = await fetch(url);
  const locations = await response.json();
  return locations;
};

let data = await fetchAPI();
// 修正：更新data变量
setInterval(async () => {
  data = await fetchAPI();
}, 5000);

async function initMap() {
    const { Map, InfoWindow, KmlLayer } = await google.maps.importLibrary("maps");
    const { Marker } = await google.maps.importLibrary("marker");
    map = new Map(document.getElementById("map"), {
      mapId: "####",
      center: { lat: ###, lng: ### },
      zoom: 14,
    });

  const busicon = "https://maps.google.com/mapfiles/ms/icons/bus.png";
  const infoWindow = new InfoWindow();
  // 新增：存储所有标记的数组
  let markers = [];

  function setMarker() {
    // 第一步：清除所有旧标记
    markers.forEach(marker => marker.setMap(null));
    markers = [];

    // 第二步：用最新data创建新标记
    var results = data.data.length
    for (let i = 0; i < results; i++){
      var busid = data.data[i].id;
      var buslat = data.data[i].latitude;
      var buslong = data.data[i].longitude;
      const marker = new Marker({
        map: map,
        position: { lat: buslat, lng: buslong },
        icon: busicon,
        title: busid
      });
      // 将新标记加入数组
      markers.push(marker);
      // 点击事件逻辑保留
      marker.addListener("click", ({ domEvent, latLng }) => {
        const { target } = domEvent;
        infoWindow.close();
        infoWindow.setContent(marker.title);
        infoWindow.open(marker.map, marker);
      });
    };
  };

  setMarker()
  setInterval(setMarker,5000)
}

initMap();

关键修改说明 #

• 更新data变量：通过async回调包裹fetchAPI调用，确保每次获取新数据后更新全局data，这样setMarker每次执行时都会使用最新的位置数据。
• 标记管理数组：用markers数组存储所有创建的标记对象，每次重绘前调用setMap(null)将旧标记从地图上移除，再清空数组，避免标记堆积。

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