Personalizza gli indicatori

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

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

Puoi farlo in due modi:

  • Più semplice: specifica un oggetto MarkerOptions da applicare a tutti i marcatori 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ù avanzata: specifica una funzione di personalizzazione. Le funzioni di personalizzazione consentono di applicare uno stile ai marcatori in base ai dati, nonché di aggiungere interattività ai marcatori, ad esempio la gestione dei clic. In particolare, l'SDK Consumer passa i dati alla funzione di personalizzazione sul tipo di oggetto rappresentato dall'indicatore: veicolo o destinazione. In questo modo, lo stile del marcatore può cambiare in base allo stato attuale dell'elemento marcatore stesso, ad esempio il numero di soste pianificate rimanenti fino alla destinazione. Puoi anche unire i dati provenienti da origini esterne a Fleet Engine e applicare uno stile al marker in base a queste informazioni.

Esempio semplice: utilizza MarkerOptions

L'esempio seguente mostra come configurare lo stile di un indicatore del veicolo con un oggetto MarkerOptions. Questo esempio imposta l'opacità del marcatore al 50%.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Esempio avanzato: utilizza una funzione di personalizzazione

L'esempio seguente mostra come configurare lo stile di un indicatore del 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}`);
  };

Aggiungere la gestione dei clic ai marker

Puoi aggiungere la gestione dei clic a qualsiasi indicatore, ad esempio nel seguente esempio per un indicatore di veicolo.

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

Visualizzare informazioni aggiuntive per i marcatori

Puoi utilizzare un InfoWindow per visualizzare informazioni aggiuntive su un marcatore di veicolo o indicatore di posizione. L'esempio seguente crea un InfoWindow e lo associa a un indicatore del 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