Personalizza gli indicatori

Questo documento spiega come personalizzare gli indicatori di veicolo e posizione nella mappa che utilizzi per la tua app di monitoraggio delle spedizioni basata sul web per i consumatori.

Con l'SDK JavaScript Consumer, puoi personalizzare l'aspetto di due tipi di indicatori aggiunti alla mappa:

Puoi eseguire questa operazione in due modi:

  • Più semplice: specifica un oggetto MarkerOptions da applicare a tutti gli indicatori dello stesso tipo. L'SDK Consumer applica quindi lo stile in due situazioni: prima di aggiungere gli indicatori alla mappa e quando i dati utilizzati per gli indicatori sono cambiati.
  • Più avanzato: specifica una funzione di personalizzazione. Le funzioni di personalizzazione consentono di applicare stili agli indicatori in base ai dati, nonché di aggiungere interattività agli indicatori, ad esempio la gestione dei clic. Nello specifico, l'SDK Consumer passa alla funzione di personalizzazione i dati relativi al tipo di oggetto rappresentato dall'indicatore: veicolo o destinazione. In questo modo, lo stile degli indicatori può cambiare in base allo stato corrente dell'elemento stesso, ad esempio il numero di fermate pianificate rimanenti fino alla destinazione. Puoi anche eseguire un'unione con dati provenienti da origini esterne a Fleet Engine e definire lo stile dell'indicatore in base a queste informazioni.

Esempio semplice: utilizza MarkerOptions

L'esempio seguente mostra come configurare lo stile di un indicatore di veicolo con un oggetto MarkerOptions. In questo esempio l'opacità dell'indicatore viene impostata al 50%.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Esempio avanzato: utilizzare una funzione di personalizzazione

L'esempio seguente mostra come configurare lo stile di un indicatore di veicolo per visualizzare il numero di fermate rimanenti per il veicolo prima di raggiungere la fermata per l'attività pianificata.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Aggiungi gestione dei clic agli indicatori

Puoi aggiungere la gestione dei clic a qualsiasi indicatore, come nell'esempio seguente per un indicatore di veicoli.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Mostra informazioni aggiuntive per gli indicatori

Puoi utilizzare un InfoWindow per visualizzare informazioni aggiuntive su un indicatore di veicolo o posizione. Nell'esempio seguente viene creato un InfoWindow che viene attaccato a un indicatore di veicolo:

JavaScript

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

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

Passaggi successivi