Dostosuj linie łamane trasy

W tym dokumencie opisujemy, jak dostosować linie łamane trasy na mapie, której używasz w aplikacji do śledzenia ścieżek użytkowników w internecie.

Za pomocą pakietu SDK dla klientów indywidualnych możesz kontrolować widoczność linii łamanych trasy oraz określać styl linii łamanej trasy dla trasy podróży na mapie. Pakiet SDK tworzy google.maps.Polyline obiektu dla każdej pary współrzędnych w ciągu aktywnej lub pozostałej ścieżki. Następnie biblioteka stosuje te dostosowania dwie sytuacje:

• przed dodaniem obiektów do mapy
• gdy dane używane na potrzeby obiektów uległy zmianie.

Określanie stylu linii łamanych trasy

Podobnie jak przy określaniu stylu znaczników, linie łamane trasy określa się za pomocą parametrów dostosowania. Następnie możesz skonfigurować styl za pomocą jednej z następujące działania:

• Najprostsze: użyj PolylineOptions, aby zastosować do wszystkich pasuje do Polyline obiektów podczas ich tworzenia lub aktualizacji.
• Zaawansowane: określ funkcję dostosowywania. Funkcje personalizacji umożliwiają stylizację obiektów na podstawie danych wysyłanych przez silnik floty. Funkcja ta może zmieniać styl każdego na podstawie bieżącego stanu podróży; na przykład pokolorowanie Polyline obiekt zwiększa cień lub zwiększa jego gęstość, gdy pojazd jest w pojeździe porusza się wolniej. Możesz nawet złączać za pomocą źródeł spoza Fleet Engine i na podstawie tych informacji określ styl obiektu Polyline.

Parametry dostosowywania

Do określania stylu linii łamanych trasy używane są parametry podane w FleetEngineTripLocationProviderOptions Te parametry wskazują następujące stany trasy na trasie przejazdu:

• Ścieżki już przebyte: użyj takenPolylineCustomization.
• Ścieżka Aktywnie przebyta: użyj activePolylineCustomization.
• Jeszcze nie przebyta ścieżka: użyj remainingPolylineCustomization.

Użyj konta PolylineOptions

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline. dzięki PolylineOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl elementu dowolny obiekt Polyline z wymienionych wcześniej dostosowań linii łamanej.

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Używanie funkcji dostosowywania do stylu linii łamanych trasy

Ten przykład pokazuje, jak skonfigurować styl aktywnej trasy. linia łamana. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline przy użyciu dowolnych spośród wymienionych wcześniej parametrów dostosowania linii łamanej trasy.

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Kontrolowanie widoczności linii łamanej trasy

Domyślnie widoczne są wszystkie obiekty Polyline. Tworzenie obiektu Polyline niewidoczny, ustaw jego właściwość visible:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};