Dostosuj linie łamane trasy

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

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 dostosowania w 2 sytuacjach:

• przed dodaniem obiektów do mapy.
• gdy zmienią się dane użyte w obiektach.

Stylizowanie linii łamanych trasy

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

• Najprostsze: użyj PolylineOptions, aby zastosować etykietę do wszystkich pasujących Polyline obiektów 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 łączyć dane ze źródeł zewnętrznych w stosunku do Fleet Engine i na podstawie tych informacji określać 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 Not-yet traveled: użyj remainingPolylineCustomization.

Otwórz PolylineOptions

W przykładzie poniżej pokazujemy, jak skonfigurować styl obiektu Polyline za pomocą elementu PolylineOptions. Aby dostosować styl dowolnego obiektu Polyline, użyj dowolnego z wymienionych wcześniej ustawień polilinii.

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

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

Używanie funkcji dostosowywania do określania stylu linii łamanych trasy

W przykładzie poniżej pokazujemy, jak skonfigurować stylizację aktywnej linii łamanej trasy. Aby dostosować styl dowolnego obiektu Polyline, postępuj zgodnie z tym wzorcem, używając dowolnego z wymienionych wcześniej parametrów dostosowywania polilinii 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. Aby obiekt Polyline był niewidoczny, ustaw jego właściwość visible:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};