Dostosuj linie łamane trasy

Wybierz platformę: Android iOS JavaScript

Z tego dokumentu dowiesz się, jak dostosować linie łamane trasy na mapie używanej w internetowej aplikacji do śledzenia podróży dla konsumentów.

Za pomocą pakietu Consumer SDK możesz kontrolować widoczność linii łamanej trasy lub stylizować linię łamaną trasy na mapie. Pakiet SDK tworzy obiekt google.maps.Polyline dla każdej pary współrzędnych na aktywnej lub pozostałej ścieżce podróży. Biblioteka stosuje te dostosowania w 2 sytuacjach:

  • przed dodaniem obiektów do mapy
  • gdy dane używane w obiektach uległy zmianie,

Stylizowanie linii łamanych trasy

Podobnie jak w przypadku znaczników, możesz stylizować linie łamane trasy za pomocą parametrów dostosowywania. Następnie możesz skonfigurować styl, korzystając z jednej z tych metod:

  • Najprostsza: użyj PolylineOptions, aby zastosować do wszystkich dopasowanych obiektów Polyline podczas ich tworzenia lub aktualizowania.
  • Zaawansowane: określ funkcję dostosowywania. Funkcje dostosowywania umożliwiają indywidualne stylizowanie obiektów na podstawie danych wysyłanych przez Fleet Engine. Funkcja może zmieniać styl każdego obiektu na podstawie bieżącego stanu podróży, np. nadawać obiektowi Polyline ciemniejszy odcień lub zwiększać jego grubość, gdy pojazd porusza się wolniej. Możesz nawet dołączać dane ze źródeł spoza Fleet Engine i na ich podstawie stylizować obiekt Polyline.

Parametry dostosowywania

Do stylizowania linii łamanych trasy używasz parametrów podanych w FleetEngineTripLocationProviderOptions. Te parametry umożliwiają określenie różnych stanów ścieżki podczas podróży pojazdu:

Otwórz PolylineOptions

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline za pomocą PolylineOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline za pomocą dowolnych opcji dostosowywania linii łamanej wymienionych wcześniej.

JavaScript

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

TypeScript

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

Używanie funkcji dostosowywania do stylizowania linii łamanych trasy

Poniższy przykład pokazuje, jak skonfigurować styl linii łamanej aktywnej trasy. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline za pomocą dowolnego z wymienionych wcześniej parametrów dostosowywania linii łamanej trasy.

JavaScript

// 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'});
      }
    }
  };

TypeScript

// 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 wszystkie obiekty Polyline są widoczne. Aby obiekt Polyline był niewidoczny, ustaw jego właściwość visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};