如何在react-google-maps/api中清除Google Map指定的DirectionsRenderer路线

在react-google-maps/api中，直接调用DirectionsRenderer.setMap(null)会出现问题，本质是因为你绕开了React的状态管理机制。正确的做法是通过声明式状态控制来移除特定路线，让React自动处理组件的挂载与卸载。

核心思路 #

维护一个包含所有路线的状态数组，当需要移除某条路线时，从数组中过滤掉对应项，React会自动卸载对应的DirectionsRenderer组件，从而从地图上移除该路线。

具体实现步骤 #

1. 给每条路线添加唯一标识

避免使用数组索引作为key，改用唯一ID（比如时间戳或UUID）确保组件渲染的稳定性：

const [routes, setRoutes] = useState([]);

DirectionsService?.route(
  {
    origin: new google.maps.LatLng(item.source.lat, item.source.lng),
    destination: new google.maps.LatLng(item.destination.lat, item.destination.lng),
    travelMode: window.google.maps.TravelMode.DRIVING,
  },
  (result, status) => {
    if (status === window.google.maps.DirectionsStatus.OK) {
      // 用时间戳生成唯一ID，也可以用uuid库生成更可靠的标识
      setRoutes((prev) => [...prev, { id: Date.now(), directions: result }]);
    } else {
      console.log("error", status);
    }
  },
);

2. 实现移除特定路线的函数

通过过滤状态数组，移除目标路线：

const removeRoute = (targetRouteId) => {
  setRoutes(prevRoutes => prevRoutes.filter(route => route.id !== targetRouteId));
};

3. 修改渲染逻辑，添加移除按钮

将路线与对应的移除按钮绑定，点击按钮触发移除操作：

return (
  <>
    {/* 地图外的路线控制按钮 */}
    <div style={{ marginBottom: 12, padding: 8 }}>
      {routes.map(route => (
        <button 
          key={route.id} 
          onClick={() => removeRoute(route.id)}
          style={{ marginRight: 8, padding: 4 8 }}
        >
          移除路线
        </button>
      ))}
    </div>

    {isLoaded ? (
      <GoogleMap
        id="map"
        ref={mapRef}
        zoom={DEFAULT_ZOOM}
        center={getDefaultOrigin()}
        onLoad={(map) => setMap(map)}
        mapContainerStyle={{
          height: "600px",
          width: "100%",
        }}
      >
        {routes.map((route) => (
          <DirectionsRenderer
            key={route.id}
            directions={route.directions}
            options={{
              polylineOptions: {
                strokeWeight: 5,
                strokeColor: STROKE_COLOR,
              },
              preserveViewport: true,
              suppressMarkers: true,
            }}
          />
        ))}
      </GoogleMap>
    ) : <></>}
  </>
);

为什么这个方法有效 #

react-google-maps/api是声明式组件库，组件的渲染完全由React状态驱动。当你从routes数组中移除某个路线对象时，对应的DirectionsRenderer组件会被React自动卸载，同时自动从地图上清除该路线，不需要手动调用setMap(null)，彻底避免了状态不一致的问题。

可选：命令式操作（特殊场景） #

如果确实需要直接操作DirectionsRenderer实例（比如复杂交互场景），可以通过ref存储每个实例，再调用setMap(null)，但必须同步更新状态：

const routeRefs = useRef([]);

// 渲染时保存实例
{routes.map((route, index) => (
  <DirectionsRenderer
    key={route.id}
    ref={el => routeRefs.current[index] = el}
    directions={route.directions}
    options={{...}}
  />
))}

// 命令式移除函数
const removeRouteImperatively = (targetRouteId) => {
  const targetIndex = routes.findIndex(route => route.id === targetRouteId);
  if (targetIndex !== -1 && routeRefs.current[targetIndex]) {
    routeRefs.current[targetIndex].setMap(null);
    setRoutes(prev => prev.filter(route => route.id !== targetRouteId));
    routeRefs.current.splice(targetIndex, 1);
  }
};

但依然推荐使用声明式方法，更符合React的设计理念，减少潜在bug。

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