Dostosowywanie znaczników

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

Dzięki pakietowi JavaScript Consumer SDK możesz dostosowywać wygląd i styl 2 typów znaczników dodawanych do mapy:

Możesz to zrobić na 2 sposoby:

  • Najprostszy: określ obiekt MarkerOptions, który zostanie zastosowany do wszystkich znaczników tego samego typu. Pakiet Consumer SDK stosuje styl w 2 sytuacjach: przed dodaniem znaczników do mapy oraz po zmianie danych używanych w tych znacznikach.
  • Bardziej zaawansowane: określ funkcję dostosowywania. Funkcje dostosowywania umożliwiają stylizację znaczników na podstawie danych, a także dodawanie do nich interakcji, np. obsługi kliknięć. W szczególności pakiet SDK dla konsumentów przekazuje funkcji personalizacji dane o typie obiektu reprezentowanego przez znacznik: pojazd lub miejsce docelowe. Dzięki temu styl znacznika może się zmieniać odpowiednio do bieżącego stanu samego elementu znacznika, np. do liczby zaplanowanych przystanków do momentu dotarcia do miejsca docelowego. Możesz nawet złączać dane ze źródeł spoza Fleet Engine i stylizować znacznik na podstawie tych informacji.

Prosty przykład: użyj MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Przykład zaawansowany: korzystanie z funkcji dostosowywania

Z przykładu poniżej dowiesz się, jak skonfigurować styl znacznika pojazdu, aby wyświetlać liczbę pozostałych przystanków przed dotarciem do przystanku w zaplanowanym zadaniu.

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

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

Obsługę kliknięć możesz dodać do dowolnego znacznika, na przykład w przypadku znacznika pojazdu w tym przykładzie.

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

Wyświetlanie dodatkowych informacji o znacznikach

Możesz użyć InfoWindow, aby wyświetlić dodatkowe informacje o środku transportu lub znaczniku lokalizacji. W tym przykładzie tworzymy element InfoWindow i dołączamy go do znacznika pojazdu:

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

Co dalej?