Dostosuj linie łamane trasy

Ten dokument wyjaśnia, jak dostosować wygląd i styl tras na monitorowanych trasach pojazdów na mapie. Trasy są rysowane na mapie w postaci linii łamanych. Dla każdej pary współrzędnych na aktywnej lub pozostałej ścieżce pojazdu biblioteka tworzy obiekt google.maps.Polyline. Stylowanie obiektów Polyline możesz wykonać, określając dostosowywanie wielolinii, które biblioteka zastosuje w 2 sytuacjach:

  • Przed dodaniem obiektów do mapy
  • Gdy dane używane na potrzeby obiektów zmienią się

Określanie stylu linii łamanych

Podobnie jak w przypadku markerów, możesz zmieniać styl odcinków ścieżki w różne sposoby:

  1. Określ styl linii łamanych trasy według typu: użyj PolylineOptions. zostanie zastosowana do wszystkich pasujących obiektów Polyline, gdy są utworzonych lub zaktualizowanych. Przykład znajdziesz w sekcji Nadawanie stylu poligonom 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 dane linii łamanych do funkcja dostosowywania, w tym dane dotyczące bieżącego pojazdu. stanu. Na podstawie tych danych można określić styl linii łamanych, w tym kolorować obiekt Polyline staje się głębszy odcień lub pojazd porusza się wolniej.

    • Źródła zewnętrzne: możesz połączyć dane śledzenia floty z danymi z spoza Fleet Engine i określić na podstawie tego stylu styl obiektu Polyline i informacjami o nich.

    Przykład znajdziesz w sekcji Stylizowanie linii łamanych na podstawie danych.

  3. Sterowanie widocznością odcinków trasy: odcinki trasy możesz ukrywać lub wyświetlać za pomocą właściwości visible. Więcej informacji: W tym przewodniku możesz zarządzać widocznością linii łamanych.

  4. Wyświetlanie dodatkowych informacji dotyczących pojazdu lub znacznika lokalizacji: Dodatkowe informacje możesz przedstawić za pomocą właściwości infowindow. Więcej informacji znajdziesz w sekcji Wyświetlanie dodatkowych informacji o pojazdach lub znacznikach lokalizacji w tym przewodniku.

Opcje dostosowywania linii złożonej

Poniższe opcje dostosowywania są dostępne w obu FleetEngineVehicleLocationProviderOptions oraz FleetEngineDeliveryVehicleLocationProviderOptions Możesz ustawić dostosowania dla różnych stanów trasy w pojeździe ścieżka:

Nadawanie stylów liniom łamanym tras według typu

Aby stylizować linie łamane trasy według typu, zmień styl obiektów Polyline za pomocą: PolylineOptions.

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline. dzięki PolylineOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego Polyline obiekt używający dowolnych dostosowań linii łamanych trasy wymienionych w Opcje dostosowywania linii łamanej w tym przewodniku.

Przykład podróży na żądanie lub zaplanowanych zadań

JavaScript

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

TypeScript

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

Nadawanie stylu liniom ścieżki za pomocą danych

Aby określić styl linii łamanych trasy z użyciem danych, zmień styl obiektów Polyline 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 elementu dowolny obiekt Polyline korzystający z wymienionych parametrów dostosowania linii łamanej w opcjach dostosowania linii łamanej w tym przewodniku.

Przykład podróży 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 natężenie ruchu (tylko podróże na żądanie)

Fleet Engine zwraca dane o szybkości ruchu dla aktywnych i pozostałych ścieżek dla poniższy pojazd. Za pomocą tych informacji możesz określić styl produktu Polyline według prędkości ruchu w obiektach:

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 linii łamanych

Domyślnie widoczne są wszystkie obiekty Polyline. Tworzenie obiektu Polyline niewidoczny, ustaw właściwość visible na false.

Przykład podróży na żądanie lub zaplanowanych zadań

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Wyświetlanie okna informacyjnego z pojazdem lub znacznikiem lokalizacji

InfoWindow pozwala wyświetlić dodatkowe informacje na temat: pojazdu lub lokalizacji.

Ten przykład pokazuje, jak utworzyć InfoWindow i dołączyć go do znacznika pojazdu.

Przykład podróży 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?