Dostosuj linie łamane trasy

Wybierz platformę: Android iOS JavaScript

W tym dokumencie znajdziesz informacje o sposobie dostosowywania linii przebiegu trasy na mapie, której używasz w swojej internetowej aplikacji do śledzenia tras dla użytkowników.

Dzięki pakietowi Consumer SDK możesz kontrolować widoczność linii na mapie lub stylizować linię na mapie dla trasy podróży. 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 ustawienia w 2 sytuacjach:

  • przed dodaniem obiektów do mapy
  • gdy dane używane w przypadku obiektów ulegną zmianie.

Nadawanie stylów liniom łamanym tras

Podobnie jak w przypadku elementów znacznika, stylowanie polilinii trasy odbywa się za pomocą parametrów personalizacji. Następnie skonfiguruj styl, korzystając z jednego z tych sposobów:

  • Najprostsza metoda: użyj funkcji PolylineOptions, aby zastosować ją do wszystkich pasujących obiektów Polyline podczas ich tworzenia lub aktualizacji.
  • Zaawansowane: określ funkcję dostosowywania. Funkcje personalizacji umożliwiają nadawanie poszczególnym obiektom indywidualnego stylu na podstawie danych wysyłanych przez silnik floty. Ta funkcja może zmieniać styl każdego obiektu w zależności od bieżącego stanu podróży. Na przykład możesz nadać obiektowi Polyline głębszy odcień lub zwiększyć jego grubość, gdy pojazd porusza się wolniej. Możesz nawet złączać dane ze źródeł spoza Fleet Engine i określać styl obiektu Polyline na podstawie tych informacji.

Parametry dostosowywania

Do określania stylu linii łamanych trasy używasz parametrów podanych w FleetEngineTripLocationProviderOptions. Te parametry umożliwiają uwzględnienie różnych stanów ścieżki w trasie pojazdu:

Użyj konta PolylineOptions

Ten przykład pokazuje, jak skonfigurować styl obiektu Polyline z PolylineOptions. Aby dostosować styl dowolnego obiektu Polyline, korzystaj z dowolnych opcji dostosowywania wielolinii wymienionych wcześniej.

JavaScript

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

TypeScript

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

Używanie funkcji dostosowywania do stylizowania odcinków trasy

Poniższy przykład pokazuje, jak skonfigurować styl aktywnej linii łamanej. Aby dostosować styl obiektu Polyline, postępuj zgodnie z tym wzorcem, używając dowolnego z wymienionych wcześniej parametrów dostosowywania wielokąta 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'});
      }
    }
  };

Sterowanie widocznością linii złożonej trasy

Domyślnie wszystkie obiekty Polyline są widoczne. Aby obiekt Polyline stał się niewidoczny, ustaw jego właściwość visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};