Polylinien für Routen anpassen

In diesem Dokument wird beschrieben, wie Sie das Design von Routen für getrackte Routen anpassen können. auf einer Karte zu sehen. Routen werden auf einer Karte mit Polylinien gezeichnet. Für jedes Paar von Koordinaten im aktiven oder verbleibenden Pfad des Fahrzeugs, erstellt die Bibliothek google.maps.Polyline-Objekt. Sie können die Polyline-Objekte gestalten, indem Sie Polylinienanpassungen angeben, die wird die Bibliothek in zwei Situationen angewendet:

• Vor dem Hinzufügen der Objekte zur Karte
• Wann sich die für die Objekte verwendeten Daten geändert haben

Polylinien gestalten

Ähnlich wie Markierungen können Sie auch Polylinien für Routen in verschiedene Möglichkeiten:

1. Stil für Routenpolygone nach Typ gestalten: Verwenden Sie PolylineOptions auf alle übereinstimmenden Polyline-Objekte anzuwenden, erstellt oder aktualisiert wurde. Ein Beispiel finden Sie unter Polylinien nach Typ gestalten.

2. Stil für Polylinien für Routen basierend auf Daten gestalten: Geben Sie eine Anpassungsfunktion an. basierend auf Daten aus der Flottenverfolgung oder aus externen Quellen:

   • Daten aus der Flottenverfolgung: Bei der Flottenverfolgung werden Polyliniendaten an die Anpassungsfunktion, einschließlich Daten zum aktuellen Fahrzeug Bundesstaat. Sie können Polylinien basierend auf diesen Daten gestalten, dem Polyline-Objekt einen tieferen Farbton hinzu. Oder Sie machen es dicker, wenn das Objekt das Fahrzeug langsamer ist.

   • Externe Quellen: Sie können Flottenverfolgungsdaten mit Daten von Quellen außerhalb von Fleet Engine an und versehen Sie das Polyline-Objekt entsprechend. Informationen.

   Ein Beispiel finden Sie unter Polylinien basierend auf Daten gestalten.

3. Sichtbarkeit von Polylinien für Routen festlegen: Sie können die Polylinien ein- oder ausblenden. Polylinien mithilfe der Eigenschaft visible dargestellt werden. Weitere Informationen finden Sie unter In dieser Anleitung können Sie die Sichtbarkeit von Polylinien steuern.

4. Zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzeigen: Mit der Eigenschaft infowindow können Sie zusätzliche Informationen anzeigen lassen. Für finden Sie unter Zusätzliche Informationen für ein Fahrzeug oder eine Standortmarkierung anzeigen in dieses Leitfadens.

Optionen zum Anpassen von Polylinien

Die folgenden Anpassungsoptionen sind in beiden FleetEngineVehicleLocationProviderOptions und FleetEngineDeliveryVehicleLocationProviderOptions Sie können Anpassungen für verschiedene Pfadzustände in der Vorgehensweise:

• Bereits zurückgelegte Strecke: takenPolylineCustomization verwenden On-Demand-Fahrten, Informationen zu geplanten Aufgaben

• Aktiv zurückgelegte Strecke: Verwenden Sie activePolylineCustomization – On-Demand-Fahrten, Informationen zu geplanten Aufgaben

• Noch nicht zurückgelegte Strecke: Verwenden Sie remainingPolylineCustomization. On-Demand-Fahrten, Informationen zu geplanten Aufgaben

Stil für Routenpolygone nach Typ gestalten

Sie können den Stil von Polyline-Objekten ändern, um Routenpolylinien nach Typ zu gestalten mit PolylineOptions.

Das folgende Beispiel zeigt, wie der Stil für ein Polyline-Objekt konfiguriert wird mit PolylineOptions. Folgen Sie diesem Muster, um den Stil eines beliebigen Polyline-Objekt mit einer der unter Optionen zum Anpassen von Polylinien in dieser Anleitung.

Beispiel für On-Demand-Fahrten oder geplante Aufgaben

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

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

Polylinien für Routen mithilfe von Daten gestalten

Wenn Sie Polylinien für Routen mithilfe von Daten gestalten möchten, müssen Sie den Stil von Polyline-Objekten ändern mithilfe von Anpassungsfunktionen.

Das folgende Beispiel zeigt, wie Sie den Stil für eine aktive Route konfigurieren mithilfe einer Anpassungsfunktion. Folgen Sie diesem Muster, um den Stil anzupassen: Jedes Polyline-Objekt mit einem der aufgeführten Parameter zur Anpassung der Polylinie finden Sie in diesem Leitfaden unter Anpassungsoptionen für Polylinien.

Beispiel für On-Demand-Fahrten

// 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'});
      }
    }
  };

// 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'});
      }
    }
  };

Beispiel für geplante Aufgaben

// 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'});
      }
    }
  };

// 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'});
      }
    }
  };

Beispiel für ein verkehrsorientiertes Design (nur On-Demand-Fahrten)

Fleet Engine gibt Daten zur Traffic-Geschwindigkeit für die aktiven und verbleibenden Pfade für folgte. Anhand dieser Informationen können Sie Polyline gestalten -Objekten entsprechend ihrer Verkehrsgeschwindigkeit:

// 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'});
      }
    }
  };

// 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'});
      }
    }
  };

Sichtbarkeit von Polylinien steuern

Standardmäßig sind alle Polyline-Objekte sichtbar. So erstellen Sie ein Polyline-Objekt: unsichtbar werden, setzen Sie die visible-Eigenschaft auf false.

Beispiel für On-Demand-Fahrten oder geplante Aufgaben

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Informationsfenster für ein Fahrzeug oder eine Standortmarkierung anzeigen

Mit einem InfoWindow können Sie zusätzliche Informationen zu einer eine Fahrzeug- oder Standortmarkierung erstellt.

Das folgende Beispiel zeigt, wie Sie ein InfoWindow erstellen und an ein Fahrzeugmarkierung.

Beispiel für On-Demand-Fahrten

// 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();

// 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();

Beispiel für geplante Aufgaben

// 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();

// 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();

Nächste Schritte

• Karte gestalten
• Markierungen anpassen