Dostosuj linie łamane trasy

Z tego dokumentu dowiesz się, jak dostosować wygląd tras śledzonych pojazdów na mapie. Trasy są rysowane na mapie jako linie łamane. Dla każdej pary współrzędnych na aktywnej lub pozostałej trasie pojazdu biblioteka tworzy google.maps.Polyline obiekt. Możesz stylizować obiekty Polyline, określając dostosowania linii łamanej, które biblioteka stosuje w 2 sytuacjach:

  • przed dodaniem obiektów do mapy,
  • gdy zmienią się dane używane w obiektach.

Stylizowanie linii łamanych

Podobnie jak w przypadku dostosowywania znaczników, możesz stylizować linie łamane tras na różne sposoby:

  1. Stylizowanie linii łamanych tras według typu: użyj PolylineOptions , aby zastosować je do wszystkich pasujących obiektów Polyline podczas ich tworzenia lub aktualizowania. Przykład znajdziesz w sekcji Stylizowanie linii łamanych według typu.

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

    • Dane ze śledzenia floty: śledzenie floty przekazuje dane linii łamanej do funkcji dostosowywania, w tym dane o bieżącym stanie pojazdu. Możesz stylizować linie łamane na podstawie tych danych, np. zmieniać kolor obiektu Polyline na ciemniejszy 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 stylizować obiekt Polyline na podstawie tych informacji.

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

  3. Kontrolowanie widoczności linii łamanych tras: możesz ukrywać i wyświetlać linie łamane za pomocą właściwości visible. Więcej informacji znajdziesz w sekcji Kontrolowanie widoczności linii łamanych 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. Więcej informacji znajdziesz w sekcji Wyświetlanie dodatkowych informacji o pojeździe lub znaczniku lokalizacji w tym przewodniku.

Opcje dostosowywania linii łamanej

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

Stylizowanie linii łamanych tras według typu

Aby stylizować linie łamane tras według typu, zmień stylizację obiektów Polyline za pomocą PolylineOptions.

Poniższy przykład pokazuje, jak skonfigurować stylizację obiektu Polyline za pomocą PolylineOptions. Postępuj zgodnie z tym wzorcem, aby dostosować stylizację dowolnego Polyline obiektu za pomocą dowolnego z dostosowań linii łamanej 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',
};

Stylizowanie linii łamanych tras na podstawie danych

Aby stylizować linie łamane tras na podstawie danych, zmień stylizację obiektów Polyline za pomocą funkcji dostosowywania.

Poniższy przykład pokazuje, jak skonfigurować stylizację aktywnej trasy za pomocą funkcji dostosowywania. Postępuj zgodnie z tym wzorcem, aby dostosować stylizację dowolnego obiektu Polyline za pomocą dowolnego z parametrów dostosowywania linii łamanej wymienionych w sekcji Opcje dostosowywania 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 stylizacji uwzględniającej ruch (tylko podróże na żądanie)

Fleet Engine zwraca dane o prędkości ruchu na aktywnej i pozostałej trasie śledzonego pojazdu. Możesz użyć tych informacji, aby stylizować obiekty Polyline zgodnie z ich 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 linii łamanych

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

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Wyświetlanie okna informacyjnego o pojeździe lub znaczniku lokalizacji

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

Poniższy przykład pokazuje, jak utworzyć InfoWindow i dołączyć ją 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?