W tym dokumencie opisujemy, jak dostosować linie łamane trasy na mapie, której używasz w aplikacji do śledzenia ścieżek użytkowników w internecie.
Za pomocą pakietu SDK dla klientów indywidualnych możesz kontrolować widoczność linii łamanych trasy oraz określać styl
linii łamanej trasy dla trasy podróży na mapie. Pakiet SDK tworzy
google.maps.Polyline
obiektu dla każdej pary współrzędnych w ciągu
aktywnej lub pozostałej ścieżki. Następnie biblioteka stosuje te dostosowania
dwie sytuacje:
- przed dodaniem obiektów do mapy
- gdy dane używane na potrzeby obiektów uległy zmianie.
Określanie stylu linii łamanych trasy
Podobnie jak przy określaniu stylu znaczników, linie łamane trasy określa się za pomocą parametrów dostosowania. Następnie możesz skonfigurować styl za pomocą jednej z następujące działania:
- Najprostsze: użyj
PolylineOptions
, aby zastosować do wszystkich pasuje doPolyline
obiektów podczas ich tworzenia lub aktualizacji. - Zaawansowane: określ funkcję dostosowywania.
Funkcje dostosowywania pozwalają na dostosowanie stylu obiektów w oparciu o
dane wysyłane przez Fleet Engine. Funkcja ta może zmieniać styl każdego
na podstawie bieżącego stanu podróży; na przykład pokolorowanie
Polyline
obiekt zwiększa cień lub zwiększa jego gęstość, gdy pojazd jest w pojeździe porusza się wolniej. Możesz nawet złączać za pomocą źródeł spoza Fleet Engine i na podstawie tych informacji określ styl obiektuPolyline
.
Parametry dostosowywania
Do określania stylu linii łamanych trasy używane są parametry podane w
FleetEngineTripLocationProviderOptions
Te parametry wskazują
następujące stany trasy na trasie przejazdu:
- Ścieżki już przebyte: użyj
takenPolylineCustomization
. - Ścieżka intensywnie pokonywana: użyj
activePolylineCustomization
. - Jeszcze nie przebyta ścieżka: użyj
remainingPolylineCustomization
.
Użyj konta PolylineOptions
Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline
.
dzięki PolylineOptions
. Postępuj zgodnie z tym wzorcem, aby dostosować styl elementu
dowolny obiekt Polyline
z wymienionych wcześniej dostosowań linii łamanej.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Używanie funkcji dostosowywania do stylu linii łamanych trasy
Ten przykład pokazuje, jak skonfigurować styl aktywnej trasy.
linia łamana. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline
przy użyciu dowolnych spośród 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'});
}
}
};
Kontrolowanie widoczności linii łamanej trasy
Domyślnie widoczne są wszystkie obiekty Polyline
. Tworzenie obiektu Polyline
niewidoczny, ustaw jego właściwość visible
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};