Dostosowywanie znaczników

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

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

Możesz to zrobić na 2 sposoby:

  • Najprostszy: określ obiekt MarkerOptions, który ma być stosowany do wszystkich znaczników tego samego typu. Pakiet SDK dla konsumentów stosuje styl w 2 sytuacjach: przed dodaniem znaczników do mapy i gdy zmienią się dane używane w przypadku znaczników.
  • Bardziej zaawansowane: określ funkcję dostosowywania. Funkcje dostosowywania umożliwiają stylizowanie znaczników na podstawie danych, a także dodawanie do nich interaktywności, np. obsługi kliknięć. W szczególności pakiet SDK Consumer przekazuje do funkcji dostosowywania dane o typie obiektu, który reprezentuje marker: pojazd lub miejsce docelowe. Dzięki temu stylizacja markera może się zmieniać w zależności od jego bieżącego stanu, np. liczby zaplanowanych przystanków pozostałych do miejsca docelowego. Możesz nawet łączyć dane ze źródeł zewnętrznych z danymi Fleet Engine i dostosowywać styl markera na podstawie tych informacji.

Prosty przykład: użyj MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Przykład zaawansowany: używanie funkcji dostosowywania

Poniższy przykład pokazuje, jak skonfigurować stylizację znacznika pojazdu, aby wyświetlać liczbę pozostałych przystanków przed dotarciem do przystanku dla zaplanowanego zadania.

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

Dodawanie obsługi kliknięć do znaczników

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

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 markerach

Możesz użyć InfoWindow, aby wyświetlić dodatkowe informacje o pojeździe lub znaczniku lokalizacji. W przykładzie poniżej tworzony jest element InfoWindow i dołączany 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?