使用@vis.gl/react-google-maps时，标记位置大幅变更导致地图瓦片加载异常

我之前做Google Maps相关项目时，也碰到过这种跨大区域调整视野后瓦片加载不全的问题，确实挺头疼的——强制重渲染地图虽然能解决，但完全牺牲了平滑过渡的体验，还浪费性能。下面给你几个更合理的解决方案，不用动组件key就能搞定：

解决方案1：触发地图resize事件强制重绘 #

有时候地图的瓦片加载机制会因为视野突变出现延迟，在fitBounds之后手动触发resize事件，能强制地图重新计算并加载对应区域的瓦片：

import { useEffect } from 'react';
import { useMap } from "@vis.gl/react-google-maps";

export default function CustomMap({ displayData }) {
  const map = useMap();

  useEffect(() => {
    if (!map || !displayData) return;

    const bounds = new window.google.maps.LatLngBounds();
    const { outdoorsData, travelData } = displayData;

    // 遍历坐标扩展bounds
    outdoorsData.forEach(item => {
      bounds.extend(new window.google.maps.LatLng(item.coordinates.lat, item.coordinates.lng));
    });
    travelData.forEach(travelItem => {
      travelItem.coordinatesArray.forEach(coord => {
        bounds.extend(new window.google.maps.LatLng(coord.lat, coord.lng));
      });
    });

    map.fitBounds(bounds);
    // 触发resize事件，强制地图重新加载瓦片
    window.google.maps.event.trigger(map, 'resize');
  }, [map, displayData]);

  // 你的Map组件和Marker渲染逻辑...
}

解决方案2：等待地图空闲状态再执行fitBounds #

当地图还在处理之前的瓦片请求时，突然调用fitBounds可能会导致加载冲突。我们可以监听地图的idle事件，等地图完全空闲后再调整视野：

useEffect(() => {
  if (!map || !displayData) return;

  const bounds = new window.google.maps.LatLngBounds();
  // ... 同样的bounds计算代码 ...

  // 添加idle事件监听，确保地图空闲后再调整视野
  const idleListener = window.google.maps.event.addListener(map, 'idle', () => {
    map.fitBounds(bounds);
    // 移除监听避免重复触发
    window.google.maps.event.removeListener(idleListener);
  });

  // 清理函数：组件卸载时移除监听
  return () => {
    if (idleListener) window.google.maps.event.removeListener(idleListener);
  };
}, [map, displayData]);

解决方案3：给fitBounds添加参数优化过渡 #

给fitBounds设置padding或maxZoom参数，让地图在调整视野时的过渡更平缓，也能减少瓦片加载混乱的概率：

map.fitBounds(bounds, {
  padding: 60, // 给地图边缘留一定间距，避免标记被裁切，同时优化加载逻辑
  maxZoom: 12 // 限制最大缩放级别，避免跨区域时直接跳到过高层级导致瓦片加载异常
});

问题复现截图 #

备注：内容来源于stack exchange，提问作者Ray