Dostosuj linie łamane trasy

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: użyj PolylineOptions, aby zastosować regułę do wszystkich dopasowanych obiektów Polyline podczas ich tworzenia lub aktualizowania.
• Zaawansowane: określ funkcję personalizacji. Funkcje personalizacji umożliwiają stylizację obiektów na podstawie danych wysyłanych przez silnik floty. Funkcja może zmieniać styl każdego obiektu w zależności od bieżącego stanu podróży, np. nadawać obiektowi Polyline ciemniejszy odcień lub robić go grubszy, gdy pojazd porusza się wolniej. Możesz nawet złączać dane ze źródeł spoza Fleet Engine i stylizować obiekt Polyline na podstawie tych informacji.

Parametry dostosowywania

Aby nadać styl liniom ścieżki, użyj parametrów podanych w FleetEngineTripLocationProviderOptions. Te parametry umożliwiają uwzględnienie różnych stanów ścieżki w trasie pojazdu:

• Już przebyty: użyj takenPolylineCustomization.
• Ścieżka Aktywnie przebyta: użyj activePolylineCustomization.
• Nieprzebyty: użyj remainingPolylineCustomization.

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.

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

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

Używanie funkcji dostosowywania do stylizowania odcinków trasy

W tym przykładzie pokazujemy, jak skonfigurować styl dla aktywnej trasy (polilinii). 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.

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

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:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};