Personalizza gli indicatori

Questo documento spiega come personalizzare il veicolo e gli indicatori di posizione sulla mappa che utilizzi per l'app di monitoraggio della spedizione basata sul web per i consumatori.

Con JavaScript Consumer SDK, 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 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 degli indicatori sono cambiati.
  • Più avanzato: specifica una funzione di personalizzazione. Funzioni di personalizzazione consente di definire lo stile degli indicatori in base ai dati e di aggiungere Interattività con gli indicatori, come la gestione dei clic. In particolare, il consumatore L'SDK passa alla funzione di personalizzazione i dati sul tipo di oggetto l'indicatore rappresenta: veicolo o destinazione. Consente di applicare uno stile agli indicatori cambiare in base allo stato corrente dell'elemento indicatore stesso; della ad esempio il numero di fermate pianificate rimanenti fino alla destinazione. Tu può anche eseguire un join con i dati provenienti da origini esterne a Fleet Engine e applicare uno stile un indicatore in base a queste informazioni.

Esempio semplice: utilizza MarkerOptions

L'esempio seguente mostra come configurare lo stile degli indicatori di veicoli con un MarkerOptions oggetto. 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 degli indicatori di veicoli per mostra il numero di tappe 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 nel seguente esempio per l'indicatore di un 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.
      });
    }
  };

Mostra informazioni aggiuntive per gli indicatori

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