Dostosowywanie znaczników

Z tego dokumentu dowiesz się, jak dostosować znaczniki pojazdu i lokalizacji na mapie którego używasz w internetowej aplikacji do śledzenia przesyłek.

Za pomocą pakietu JavaScript Consumer SDK możesz dostosować wygląd i styl 2 typy znaczników dodanych do mapy:

• Znaczniki pojazdu dostarczanego: użyj deliveryVehicleMarkerCustomization
• Znaczniki miejsc docelowych: użyj destinationMarkerCustomization

Możesz to zrobić na 2 sposoby:

• Najprostsze: określ obiekt MarkerOptions, który zostanie zastosowany do wszystkich znaczników. tego samego typu. Pakiet Consumer SDK stosuje styl w dwóch przed dodaniem znaczników do mapy oraz kiedy dane zostały użyte dla znaczników uległy zmianie.
• Bardziej zaawansowane: określ funkcję dostosowywania. Funkcje dostosowywania pozwalają na określanie stylu znaczników na podstawie danych oraz dodawanie interaktywność ze znacznikami, na przykład obsługę kliknięć. Konkretnie rzecz biorąc, SDK przekazuje do funkcji dostosowywania dane dotyczące typu obiektu znacznik reprezentuje pojazd lub cel podróży. Pozwoli to na określanie stylu znacznika zmienia się odpowiednio do bieżącego stanu samego elementu znacznika; w przypadku na przykład liczba zaplanowanych przystanków do momentu dotarcia do miejsca docelowego. Ty może nawet łączyć dane ze źródłami spoza Fleet Engine i określać styl na podstawie tych informacji.

Prosty przykład: użyj atrybutu MarkerOptions

Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą MarkerOptions obiekt. W tym przykładzie przezroczystość znacznika jest ustawiana na 50%.

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Przykład zaawansowany: korzystanie z funkcji dostosowywania

Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu, aby wyświetlać liczbę pozostałych przystanków dla pojazdu przed dojazdem do zaplanowane zadanie.

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

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

Dodaj obsługę kliknięć do znaczników

Obsługę kliknięć można dodać do dowolnego znacznika, jak w przykładzie poniżej dla znacznika pojazdu.

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

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

Wyświetl dodatkowe informacje o znacznikach

InfoWindow pozwala wyświetlić dodatkowe informacje na temat: pojazdu lub lokalizacji. Ten przykład pozwala utworzyć InfoWindow i dołącza go do znacznika pojazdu:

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

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

Co dalej?

• Dostosowywanie linii łamanych