Dostosuj linie łamane trasy

Wybierz platformę: Android iOS JavaScript

W tym dokumencie opisujemy, jak dostosować polilinie trasy na mapie używanej w internetowej aplikacji do śledzenia podróży dla użytkowników indywidualnych.

Za pomocą pakietu Consumer SDK możesz kontrolować widoczność linii łamanej trasy lub zmieniać jej styl 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 zmiany w 2 sytuacjach:

• przed dodaniem obiektów do mapy.
• gdy zmienią się dane używane w przypadku obiektów;

Stylizowanie linii łamanych trasy

Podobnie jak w przypadku znaczników, polilinie trasy możesz stylizować za pomocą parametrów dostosowywania. Następnie skonfiguruj stylizację, korzystając z jednej z tych metod:

• Najprostsze: użyj PolylineOptions, aby zastosować je do wszystkich pasujących obiektów Polyline podczas ich tworzenia lub aktualizowania.
• Zaawansowane: określ funkcję dostosowywania. Funkcje dostosowywania umożliwiają indywidualne stylowanie obiektów na podstawie danych wysyłanych przez Fleet Engine. 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 sprawiać, że będzie grubszy, gdy pojazd porusza się wolniej. Możesz nawet dołączyć do źródeł spoza Fleet Engine i na podstawie tych informacji określić styl obiektu Polyline.

Parametry dostosowywania

Podczas stylizowania linii łamanych trasy używasz parametrów podanych w FleetEngineTripLocationProviderOptions. Te parametry określają różne stany ścieżki podczas podróży pojazdu:

• Ścieżki już przebyte: użyj takenPolylineCustomization.
• Ścieżka aktywnie pokonywana: użyj activePolylineCustomization.
• Ścieżka jeszcze nieodbyta: użyj remainingPolylineCustomization.

Używaj klawisza PolylineOptions

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline z elementem PolylineOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego Polyline obiektu, korzystając z 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 określania stylu linii łamanych trasy

Poniższy przykład pokazuje, jak skonfigurować stylizację aktywnej linii łamanej trasy. Aby dostosować styl dowolnego obiektu Polyline, użyj dowolnego z wymienionych wcześniej parametrów dostosowywania polilinii 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 widoczne są wszystkie obiekty Polyline. Aby obiekt Polyline był niewidoczny, ustaw jego właściwość visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};