Google Maps API刷新时Marker用户位置错乱问题排查

你遇到的Marker位置错乱核心问题是异步请求的响应顺序不固定：
你在useEffect里遍历farmersArr发起地理编码请求，但Geocode.fromAddress是异步操作，不同地址的解析速度不一样——有的请求先返回，有的后返回，导致farmers_coordinations数组里的坐标顺序和原farmersArr的用户顺序完全不匹配。后续用索引i绑定Marker和坐标时，自然就出现了Marker与用户随机绑定的情况。

要保证坐标数组顺序和用户数组严格对应，推荐用Promise.all统一处理所有异步请求，等全部请求完成后再按原用户顺序整理坐标：

修改你的useEffect代码：

useEffect(() => {
  // 为每个用户生成带ID的地理编码Promise
  const geocodePromises = farmersArr.map((farmer) => 
    Geocode.fromAddress(farmer.location)
      .then(response => ({
        id: farmer.id,
        coords: response.results[0].geometry.location
      }))
      .catch(error => {
        console.error(`解析用户${farmer.id}地址失败:`, error);
        return { id: farmer.id, coords: null }; // 处理解析失败的情况
      })
  );

  // 等待所有请求完成，再按原用户顺序匹配坐标
  Promise.all(geocodePromises)
    .then(results => {
      const sortedCoords = farmersArr.map(farmer => 
        results.find(res => res.id === farmer.id)?.coords || null
      );
      set_farmers_coordinations(sortedCoords);
    });
}, [farmersArr]); // 加入farmersArr依赖，用户数组变化时重新请求

额外优化建议：

• 渲染Marker时增加判空逻辑，避免坐标未加载完成时出现错误：

  {farmersArr.map((farmer, i) => farmers_coordinations[i] && (
    <Marker
      key={farmer.id}
      position={farmers_coordinations[i]}
      // ...其他属性
    />
  ))}
  

• 原代码中useEffect依赖为空数组，若farmersArr是动态获取的，会导致请求不更新，必须将farmersArr加入依赖列表。

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