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 na aktywnym lub pozostałym szlaku 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żyte w przypadku obiektów ulegną zmianie

Stylizowanie linii łamanych

Podobnie jak w przypadku markerów możesz dostosowywać polilinie tras na różne sposoby:

  1. Stylizuj polilinie trasy według typu: użyj PolylineOptions aby zastosować do wszystkich pasujących obiektów Polyline, gdy są one tworzone lub aktualizowane. Przykład znajdziesz w artykule Style polylines by type (Stylizowanie polilinii według typu).

  2. Stylizuj polilinie trasy na podstawie danych: określ funkcję dostosowywania na podstawie danych z ś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 polilinii, np. nadawać obiektowi Polyline ciemniejszy odcień lub zwiększać jego grubość, gdy pojazd porusza się wolniej.

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

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

  3. Kontrolowanie widoczności polilinii trasy: możesz ukrywać i wyświetlać polilinie za pomocą właściwości visible. Więcej informacji 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 za pomocą 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 linii łamanej

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

Stylizowanie polilinii tras według typu

Aby określić styl polilinii trasy według typu, zmień styl obiektów Polyline za pomocą PolylineOptions.

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline z elementem 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 w przypadku 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 Polyline obiektów za pomocą funkcji dostosowywania.

Poniższy przykład pokazuje, 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 polilinii wymienionych w sekcji Opcje dostosowywania polilinii 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 ścieżkach śledzonego pojazdu. Na podstawie tych informacji możesz określać styl Polylineobiektów w zależności od 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 widoczne są wszystkie obiekty Polyline. 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.

Poniższy przykład pokazuje, 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?