Блог

Я хочу отображать разные пути направления при изменении источника и пункта назначения, но предыдущий маршрут все еще находится на карте.

Как я могу удалить это и оставить только текущий путь?

Вот мой код, который отображается в хуке useEffect

 const directionsService = new maps.DirectionsService();
const directionsDisplay = new maps.DirectionsRenderer();
if (origin.postCode amp;amp; 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 amp;amp; 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 как ссылку (поскольку вы хотите показать только одну):

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

  React.useEffect(() => {
    if (origin.postCode amp;amp; 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 amp;amp; 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, в нем отсутствуют некоторые части компонента (например, возврат и т.д.).