設定新路線時路線未清除-有解無憂

我正在使用 Google Maps Directions API 在地圖上繪制路線。它在第一次呼叫時執行我想要的操作DirectionsRenderer.setDirections(response)，但在第二次呼叫時，它會保留先前的路由并在其上使用新路由。如何清除之前的路線？

代碼：

export async function testRouteCalculation(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer,
  withWaypoints: boolean,
  numWaypointsToInclude: number
) {
  let request: google.maps.DirectionsRequest = {
    origin: testOrigin,
    destination: testDestination,
    travelMode: google.maps.TravelMode["DRIVING"],
    unitSystem: google.maps.UnitSystem.METRIC,
    provideRouteAlternatives: false,
    // region is specified for region biasing
    region: "za",
    waypoints: [],
  };

  if (withWaypoints) {
    for (let i = 0; i < numWaypointsToInclude; i  ) {
      request!.waypoints!.push(testWaypoints[i]);
    }
  }

  try {
    const response = await directionsService.route(request);
    return response;
  } catch (err) {
    throw err;
  }

地圖組件：

const Map = () => {
  const ref = React.useRef<HTMLDivElement>(null);
  const [map, setMap] = React.useState<google.maps.Map>();
  const [directionsRenderer, setDirectionsRenderer] =
    React.useState<google.maps.DirectionsRenderer>();
  const [directionsService, setDirectionsService] =
    React.useState<google.maps.DirectionsService>();

  React.useEffect(() => {
    let newMap = null;
    if (ref.current && !map) {
      newMap = new window.google.maps.Map(ref.current, {
        center: capeTownCoordinates,
        zoom: 13,
        streetViewControl: false,
        mapTypeControl: false,
      });
      setMap(newMap);
    }
    const newDirectionsRenderer = new google.maps.DirectionsRenderer();
    newDirectionsRenderer.setMap(newMap);
    setDirectionsRenderer(newDirectionsRenderer);
    setDirectionsService(new google.maps.DirectionsService());
  }, [ref, map]);

  if (map && directionsRenderer && !directionsRenderer.getMap()) {
    directionsRenderer.setMap(map);
  }

  const handleClick = async () => {
    if (directionsRenderer && directionsService) {
      try {
        const response = await testRouteCalculation(
          directionsService,
          directionsRenderer,
          true,
          2
        );

        directionsRenderer.setDirections(response);
      } catch (err) {
        console.log(err);
      }
    } else {
      console.log("no directionsRenderer or directionsService object");
    }
  };

  return (
    <>
      <div id="map" style={{ height: "300px", width: "400px" }} ref={ref}></div>
      <button onClick={handleClick} className={styles["floating-button"]}>
        Get route
      </button>
    </>
  );
};

我搜索并看到了建議的解決方案，例如directionsRenderer.setDirections(null)或directionsRenderer.setMap(null)在設定新方向之前，以及其他幾個，但沒有一個對我有用。我認為這.setDirections()會覆寫以前的路線，但似乎在地圖上繪制的路線和存盤在 directionRenderer 中的方向是分離的。

uj5u.com熱心網友回復：

我發現呼叫directionsRenderer({routes: []})實作了我想要的。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/523928.html

標籤：反应打字稿谷歌地图网络

上一篇：html2canvas無法捕獲谷歌靜態地圖

下一篇：聊聊計算機中的暫存器