Dostosuj linie łamane trasy

Z tego dokumentu dowiesz się, jak dostosować wygląd tras śledzonych pojazdów na mapie. Trasy są rysowane na mapie za pomocą linii łamanych. Dla każdej pary współrzędnych w aktywnej lub pozostałej ścieżce pojazdu biblioteka tworzy obiekt google.maps.Polyline. Możesz określić styl obiektów Polyline, podając dostosowania polilinii, które biblioteka stosuje w 2 sytuacjach:

  • Przed dodaniem obiektów do mapy
  • gdy dane używane w obiektach uległy zmianie,

Stylizowanie linii łamanych

Podobnie jak w przypadku znaczników, możesz dostosować styl linii łamanych trasy na różne sposoby:

  1. Stylizowanie polilinii trasy według typu: użyj PolylineOptions do wszystkich pasujących obiektów Polyline podczas ich tworzenia lub aktualizowania. Przykład znajdziesz w artykule Stylizowanie polilinii według typu.

  2. Stylizowanie linii łamanych trasy na podstawie danych: określ funkcję dostosowywania na podstawie danych ze śledzenia floty lub ze źródeł zewnętrznych:

    • Dane ze śledzenia floty: śledzenie floty przekazuje do funkcji dostosowywania dane polilinii, w tym dane o bieżącym stanie pojazdu. Na podstawie tych danych możesz określać styl linii łamanych, np. nadawać obiektowi Polyline ciemniejszy odcień lub zwiększać jego grubość, gdy pojazd porusza się wolniej.

    • Źródła zewnętrzne: możesz połączyć dane śledzenia floty z danymi ze źródeł spoza Fleet Engine i na podstawie tych informacji określić styl obiektu Polyline.

    Przykład znajdziesz w artykule Stylizowanie polilinii na podstawie danych.

  3. Kontrolowanie widoczności linii łamanych trasy: możesz ukrywać i wyświetlać linie łamane za pomocą właściwości visible. Szczegółowe informacje znajdziesz w sekcji Kontrolowanie widoczności polilinii w tym przewodniku.

  4. Wyświetlanie dodatkowych informacji o pojeździe lub znaczniku lokalizacji: możesz wyświetlać dodatkowe informacje, korzystając z właściwości infowindow. Szczegółowe informacje znajdziesz w artykule Wyświetlanie dodatkowych informacji o pojeździe lub znaczniku lokalizacji w tym przewodniku.

Opcje dostosowywania polilinii

Te opcje dostosowywania są dostępne zarówno w przypadku FleetEngineVehicleLocationProviderOptions, jak i FleetEngineDeliveryVehicleLocationProviderOptions. Możesz dostosować ustawienia dla różnych stanów ścieżki podczas podróży pojazdu:

Stylizowanie linii łamanych trasy według typu

Aby nadać styl poliliniom trasy według typu, zmień styl obiektów Polyline za pomocą 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ą dowolnych opcji dostosowywania linii łamanej trasy wymienionych w sekcji Opcje dostosowywania linii łamanej w tym przewodniku.

Przykład przejazdów na żądanie lub zaplanowanych zadań

JavaScript

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

TypeScript

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

Stylizowanie linii łamanych trasy za pomocą danych

Aby stylizować linie łamane trasy za pomocą danych, zmień styl obiektów Polyline za pomocą funkcji dostosowywania.

W przykładzie poniżej pokazujemy, jak skonfigurować styl aktywnej trasy za pomocą funkcji dostosowywania. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline za pomocą dowolnego z parametrów dostosowywania linii łamanej wymienionych w sekcji Opcje dostosowywania linii łamanej w tym przewodniku.

Przykład przejazdów na żądanie

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

Przykład zaplanowanych zadań

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

Przykład stylu uwzględniającego ruch (tylko przejazdy na żądanie)

Fleet Engine zwraca dane o szybkości ruchu na aktywnej i pozostałych trasach śledzonego pojazdu. Możesz użyć tych informacji, aby nadać styl obiektom Polyline zgodnie z prędkością ruchu:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Kontrolowanie widoczności polilinii

Domyślnie wszystkie obiekty Polyline są widoczne. Aby obiekt Polyline był niewidoczny, ustaw jego właściwość visible na false.

Przykład w przypadku przejazdów na żądanie lub zaplanowanych zadań

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Wyświetlanie okna informacyjnego dotyczącego pojazdu lub znacznika lokalizacji

Możesz użyć InfoWindow, aby wyświetlić dodatkowe informacje o pojeździe lub znaczniku lokalizacji.

W przykładzie poniżej pokazujemy, jak utworzyć InfoWindow i dołączyć go do znacznika pojazdu.

Przykład przejazdów na żądanie

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Przykład zaplanowanych zadań

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Co dalej?