如何從谷歌地圖方向中刪除以前的路線以做出反應？

Question

我想在更改起點和終點時渲染不同的方向路徑，但之前的路線仍在地圖上。

如何刪除它並只保留當前路徑？

這是我在 useEffect 鈎子中呈現的代碼

const directionsService = new maps.DirectionsService();
const directionsDisplay = new maps.DirectionsRenderer();
if (origin.postCode && destination.postCode) {
    directionsService.route({
        origin: origin.postCode,
        destination: destination.postCode,
        waypoints: [],
        travelMode: 'DRIVING'
    }, (response, status) => {
        if (status === 'OK') {
            directionsDisplay.setDirections(response);
            const routePolyline = new maps.Polyline({
                path: response.routes[0].overview_path,
                strokeColor: purple,
                strokeOpacity: 1.0,
                strokeWeight: 5
            });
            routePolyline.setMap(map);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
    if (mapRef) {
        const bounds = new maps.LatLngBounds();
        mapRef.props.children.forEach((child) => {
            if (child && child.type === Marker) {
                bounds.extend(new maps.LatLng(child.props.lat, child.props.lng));
            }
        })
        map.fitBounds(bounds);
        setCenter({
            lat: (origin.location.lat + destination.location.lat) / 2,
            lng: (origin.location.lng + destination.location.lng) / 2
        })
    }
}

Answer 1

您應該將 routePolyline 存儲為 ref （因為您只想顯示一個）：

function MyComponent() {
  const routePolyline = React.useRef();

  React.useEffect(() => {
    if (origin.postCode && destination.postCode) {
      directionsService.route(
        {
          origin: origin.postCode,
          destination: destination.postCode,
          waypoints: [],
          travelMode: "DRIVING",
        },
        (response, status) => {
          if (status === "OK") {
            directionsDisplay.setDirections(response);
            if (routePolyline.current) {
              // if we have an existing routePolyline we unset it
              routePolyline.setMap(null);
            }
            routePolyline.current = new maps.Polyline({
              path: response.routes[0].overview_path,
              strokeColor: purple,
              strokeOpacity: 1.0,
              strokeWeight: 5,
            });
            routePolyline.setMap(map);
          } else {
            window.alert("Directions request failed due to " + status);
          }
        }
      );
      if (mapRef) {
        const bounds = new maps.LatLngBounds();
        mapRef.props.children.forEach((child) => {
          if (child && child.type === Marker) {
            bounds.extend(new maps.LatLng(child.props.lat, child.props.lng));
          }
        });
        map.fitBounds(bounds);
        setCenter({
          lat: (origin.location.lat + destination.location.lat) / 2,
          lng: (origin.location.lng + destination.location.lng) / 2,
        });
      }
    }
  }, []);
}

^ 上面的例子只是為了展示 routePolyline ref 的用法，它缺少組件的一些部分（如返回等）。