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.

Określanie stylu linii łamanych trasy

Podobnie jak w przypadku znaczników określasz styl linii łamanych trasy, korzystając z parametrów dostosowywania. 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ą 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 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:

Użyj konta 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ą wymienionych wcześniej dostosowań linii łamanych.

JavaScript

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

TypeScript

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). Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline za pomocą wymienionych wcześniej parametrów dostosowania 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'});
      }
    }
  };

Sterowanie widocznością linii złożonej 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};