Śledzenie przesyłki za pomocą biblioteki śledzenia dostawy JavaScript

Biblioteka śledzenia przesyłek JavaScript umożliwia wizualizację lokalizacji pojazdów i interesujących lokalizacji śledzonych przez Fleet Engine. Biblioteka zawiera komponent mapy JavaScript, który jest zwykłym zamiennikiem; dla standardowego elementu google.maps.Map i komponentów danych do połączenia we Fleet Engine. Korzystając z biblioteki śledzenia przesyłki JavaScript, możesz zapewnić spersonalizowane, animowane śledzenie przesyłki za pomocą aplikacji internetowej.

Komponenty

Biblioteka śledzenia przesyłek JavaScript zawiera komponenty do wizualizacji pojazdu i trasy w miarę dojeżdżania do celu, a także nieprzetworzone dane. z szacowanym czasem dotarcia kierowcy lub pozostałym dystansem do przejechania.

Widok mapy śledzenia przesyłki

Komponent Widok mapy wizualizuje lokalizację pojazdów i miejsc docelowych. Jeśli trasa pojazdu jest znana, komponent widoku mapy jest animowany. jaki pojazd porusza się po prognozowanej ścieżce.

Dostawca lokalizacji dostawy

Dostawca lokalizacji dostawy przekazuje informacje o lokalizacji śledzonych obiektów do mapy śledzenia przesyłki w celu śledzenia przesyłki na pierwszej i ostatniej mili.

Możesz skorzystać z usług dostawcy miejsca dostawy, aby śledzić:

  • Lokalizacja odbioru lub dostawy przesyłki.
  • Lokalizacja i trasa pojazdu dostawy.

Obiekty ze śledzoną lokalizacją

Dostawca lokalizacji śledzi lokalizację obiektów takich jak samochody czy miejsca docelowe.

Lokalizacja docelowa

Lokalizacja docelowa to miejsce, w którym kończy się podróż. Do wysyłki śledzenia, jest to lokalizacja planowanego zadania.

Lokalizacja pojazdu

Lokalizacja pojazdu to śledzona lokalizacja pojazdu. Opcjonalnie: uwzględnij trasę pojazdu.

Pobieranie tokenów uwierzytelniania

Aby kontrolować dostęp do danych o lokalizacji przechowywanych we Fleet Engine, musisz wdrożyć usługę generowania tokenów sieciowych JSON (JWT) dla Fleet Engine na swoim serwerze. Następnie zaimplementuj moduł pobierania tokenów uwierzytelniania. Twojej aplikacji internetowej za pomocą biblioteki udostępniania czynności JavaScript. aby uwierzytelnić dostęp do danych o lokalizacji.

Opcje stylu

Style znaczników i linii łamanych określają wygląd i styl śledzonych obiektów lokalizacji na mapie. Za pomocą niestandardowe opcje stylu pozwalające zmienić styl domyślny w celu dostosowania go do stylu Twojej aplikacji internetowej.

Kontrolowanie widoczności śledzonych lokalizacji

W tej sekcji opisano ustawienia widoczności śledzonych obiektów na mapie. Te reguły dotyczą 2 kategorii obiektów:

  • Znacznik lokalizacji
  • Dane zadania

Widoczność znacznika lokalizacji

Wszystkie znaczniki lokalizacji punktu początkowego i docelowego są zawsze wyświetlane na mapie. Przykładowo miejsce dostawy jest zawsze wyświetlane na mapie, bez względu na stan dostawy.

Widoczność danych dotyczących zadań

W tej sekcji opisano domyślne reguły widoczności, które mają zastosowanie do danych zadań. takie jak lokalizacja pojazdu i pozostała trasa. Możesz dostosować wiele zadań, ale nie wszystkie:

  • Zadań o niedostępności – nie można dostosować ich widoczności.
  • Aktywne zadania związane z pojazdem – możesz dostosować tego typu zadania.
  • Nieaktywne zadania związane z pojazdem – nie możesz dostosować ich widoczności.

Zadania związane z niedostępnością

Jeśli jest co najmniej 1 zadanie dotyczące niedostępności (na przykład jeśli kierowca robi sobie przerwę lub uzupełnia paliwo) na trasie, w śledzonym zadaniu, pojazd nie jest widoczny. Przewidywany termin dostawy czas i szacowany czas ukończenia są nadal dostępne.

Aktywne zadania związane z pojazdem

TaskTrackingInfo udostępnia pewną liczbę elementów danych, które mogą być widoczne w Biblioteka śledzenia przesyłki. Domyślnie te pola są widoczne, gdy zadanie jest jest przypisany do pojazdu i znajduje się w odległości 5 przystanków od zadania. gdy zadanie zostanie ukończone lub anulowane. Pola te mają następujące:

  • Wyznacz linie łamane trasy
  • Szacowany czas do przybycia
  • Szacowany czas ukończenia zadania
  • Pozostała odległość samochodem do zadania
  • Pozostała liczba zatrzymania
  • Lokalizacja pojazdu

W zależności od zadania możesz dostosować konfigurację widoczności za pomocą: TaskTrackingViewConfig podczas tworzenia lub aktualizowania zadania we Fleet Engine. Powoduje to określające dostępność poszczególnych elementów danych, które mogą się opierać następujące kryteria (nazywane poniżej opcją widoczności):

  • Pozostała liczba zatrzymania
  • Czas do szacowanego czasu przyjazdu
  • Pozostały dystans jazdy
  • Zawsze widoczne
  • Nigdy niewidoczne

Pamiętaj, że każdy element danych może być powiązany tylko z 1 opcją widoczności. Nie można łączyć kryteriów za pomocą operatorów LUB albo ORAZ.

Oto przykład dostosowania. Oto zasady tego dostosowania:

  • Pokaż linie łamane trasy, jeśli pojazd znajduje się w odległości 3 przystanków.
  • Pokaż szacowany czas dotarcia, jeśli pozostała długość trasy jest krótsza niż 5000 metrów.
  • Nigdy nie pokazuj liczby pozostałych przystanków.
  • Każde pozostałe pole zachowuje domyślną widoczność, czyli jest wyświetlane, gdy pojazd znajduje się w odległości 5 przystanków od zadania.
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Możesz też dostosować domyślną konfigurację widoczności projektu przez kontaktując się z zespołem pomocy.

Zasady dotyczące linii łamanych trasy i reguły widoczności lokalizacji pojazdu:

Gdy linie łamane trasy są widoczne, musi być też widoczna lokalizacja pojazdu. W przeciwnym razie lokalizację pojazdu można wskazać na końcu linii łamanych. Ten oznacza, że linie łamane trasy nie mogą mieć mniej restrykcyjnej opcji widoczności.

Przestrzegaj tych zasad, aby podać prawidłowe linie łamane trasy / pojazd Kombinacja widoczności lokalizacji:

  • Gdy linie łamane trasy i lokalizacja pojazdu mają tę samą opcję widoczności typ:

    • Jeśli opcja widoczności to nadal liczba zatrzymania, czas do szacowanego czasu dotarcia na miejsce lub pozostała odległość jazdy, linie łamane trasy muszą podawać wartość mniejszą co najmniej wartości ustawionej dla tej opcji widoczności pojazdu lokalizacji. Przykład:
    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
    • Jeśli linie łamane trasy mają zawsze widoczną opcję widoczności, lokalizacja pojazdu musi też zapewniać opcję zawsze widocznej widoczności.
    • Jeśli lokalizacja pojazdu ma opcję widoczności nigdy niewidoczną, linie łamane trasy musi też zapewniać opcję widoczności, która nigdy nie będzie widoczna.

  • Gdy linie łamane trasy i lokalizacja pojazdu mają różne opcje widoczności typ pojazdu, lokalizacja pojazdu jest widoczna tylko wtedy, gdy oba te parametry dostępne opcje.

    Przykład:

    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingDrivingDistanceMetersThreshold": 3000
  },
}

    W tym przykładzie lokalizacja pojazdu jest widoczna tylko wtedy, gdy pozostały przystanek wynosi co najmniej 3 ORAZ pozostała odległość pojazdu to co najmniej 3000 m

Pierwsze kroki z biblioteką udostępniania ścieżek JavaScript

Zanim skorzystasz z biblioteki udostępniania ścieżek JavaScript, sprawdź, czy: znajomość Fleet Engine oraz uzyskanie klucza interfejsu API.

Aby śledzić dostawę, najpierw utwórz roszczenie identyfikatora śledzenia.

Tworzenie roszczenia dotyczącego identyfikatora śledzenia

Aby śledzić przesyłkę za pomocą dostawcy miejsca nadania: utworzyć token sieciowy JSON (JWT) z deklaracją identyfikatora śledzenia.

Aby utworzyć ładunek JWT, dodaj dodatkową deklarację w sekcji autoryzacji z kluczem trackingid. Jako jego wartość ustaw identyfikator śledzenia przesyłki.

Poniższy przykład pokazuje, jak utworzyć token do śledzenia według identyfikatora śledzenia:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "trackingid": "tid_54321",
   }
}

Tworzenie modułu pobierania tokenów uwierzytelniania

Możesz utworzyć moduł pobierania tokenów uwierzytelniania, który będzie pobierać wygenerowany token z odpowiednimi deklaracjimi na serwerach w ramach usługi certyfikat konta dla swojego projektu. Ważne jest, aby generować tylko tokeny na swoich serwerach i nigdy nie udostępniaj swoich certyfikatów żadnym klientom. W przeciwnym razie zagraża bezpieczeństwu systemu.

Moduł pobierania musi zwracać strukturę danych z dwoma polami zapakowanymi w obietnicę:

  • Ciąg token.
  • Numer expiresInSeconds. Token wygaśnie w tym czasie po pobierania.

Biblioteka śledzenia przesyłek JavaScript wysyła żądanie tokena przez uwierzytelnianie moduł pobierania tokenów, gdy jest spełniony dowolny z tych warunków:

  • Nie ma prawidłowego tokena, na przykład gdy nie wywołał modułu pobierania wczytanie nowej strony lub gdy moduł pobierania nie zwrócił się z tokenem.
  • Pobrany wcześniej token wygasł.
  • Wygenerowany wcześniej token straci ważność w ciągu minuty.

W przeciwnym razie biblioteka używa poprzednio wydanego, wciąż ważnego tokena, przy czym nie mogą wywoływać modułu pobierania.

Poniższy przykład pokazuje, jak utworzyć moduł pobierania tokenów uwierzytelniania:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

Podczas implementowania punktu końcowego po stronie serwera do generowania tokenów zachowaj parametr o których warto pamiętać:

  • Punkt końcowy musi zwracać czas wygaśnięcia tokena. Z tego przykładu powyżej ma postać data.ExpiresInSeconds.
  • Moduł pobierający token uwierzytelniania musi upłynie czas ważności (w sekundach, podczas pobierania) do biblioteki, jak pokazano w przykładzie.
  • Adres SERVER_TOKEN_URL zależy od implementacji backendu. Oto adresy URL backendu przykładowej aplikacji:
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/fleet_reader

Wczytywanie mapy z HTML

Poniższy przykład pokazuje, jak wczytać śledzenie wysyłki JavaScript Biblioteka z określonego adresu URL. Parametr callback wykonuje polecenie initMap po wczytaniu interfejsu API. Atrybut defer pozwala przeglądarce kontynuuj renderowanie reszty strony podczas wczytywania interfejsu API.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Śledź przesyłkę

Ta sekcja pokazuje, jak korzystać z biblioteki śledzenia przesyłki JavaScript na temat odbioru lub dostawy przesyłki. Upewnij się, że: wczytaj bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu przed uruchomieniem kodu.

Utwórz instancję dostawcy lokalizacji dostawy

Biblioteka śledzenia przesyłek JavaScript wstępnie definiuje dostawcę lokalizacji dla interfejsu Fleet Engine Deliveries API. Utwórz instancję, używając identyfikatora projektu i odwołania do fabryki tokenów.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

Inicjowanie widoku mapy

Po wczytaniu biblioteki udostępniania czynności JavaScript zainicjuj ją. widok mapy i dodać go do strony HTML. Strona powinna zawierać element &lt;div&gt; zawierający widok mapy. W poniższym przykładzie element &lt;div&gt; ma nazwę &lt;div&gt;.

Aby uniknąć wyścigu, ustaw identyfikator śledzenia dla dostawcy lokalizacji w wywołaniu zwrotnym wywoływanym po zainicjowaniu mapy.

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Identyfikator śledzenia

Identyfikator śledzenia przekazany dostawcy lokalizacji może odpowiadać kilku zadania; na przykład zadanie odbioru i dostawy tej samej przesyłki, kilka nieudanych prób dostarczenia. Wybrano 1 zadanie do wyświetlenia na mapę śledzenia przesyłki. Zadanie do wyświetlenia jest określone w ten sposób:

  1. Jeśli jest tylko jedno otwarte zadanie odbioru, zostanie ono wyświetlone. Wygenerowany jest błąd jeśli jest wiele otwartych zadań dotyczących odbioru.
  2. Jeśli istnieje dokładnie 1 otwarte zadanie dostarczania, zostanie ono wyświetlone. Błąd to generowanej, jeśli istnieje wiele otwartych zadań dostarczania.
  3. Jeśli masz zadania dostawy zamkniętego:
    • Jeśli istnieje dokładnie 1 zamknięte zadanie dostarczania, jest ono wyświetlane.
    • Jeśli masz wiele zadań dostawy zamkniętego, to to z najnowszym wyświetlany jest czas wyniku.
    • Jeśli jest wiele zadań dostawy zamkniętego, żadne z nich nie zakończy się wynikiem wtedy wystąpi błąd.
  4. Jeśli masz zamknięte zadania dotyczące odbioru:
    • Jeśli istnieje dokładnie 1 zamknięte zadanie odbioru, jest ono wyświetlane.
    • Jeśli masz kilka zamkniętych zadań odbioru, to z najnowszym wyświetlany jest czas wyniku.
    • Jeśli jest kilka zamkniętych zadań odbioru, żadne z nich nie zakończy się wynikiem wtedy wystąpi błąd.
  5. W przeciwnym razie zadanie nie jest wyświetlane.

Nasłuchuj zdarzeń zmian

Możesz pobrać metadane dotyczące zadania z informacji o śledzeniu zadań za pomocą dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia na miejsce, liczba pozostałych przystanków oraz odległość przed odbiorem lub dostawą. Zmiany metainformacji wywołują zdarzenie update. Przykład poniżej pokazuje, jak nasłuchiwać tych zdarzeń zmian.

JavaScript

locationProvider.addListener('update', e => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

Obsługa błędów

Błędy, które występują asynchronicznie podczas żądania aktywacji informacji o dostawie error. Przykład poniżej pokazuje, jak nasłuchiwać tych zdarzeń aby naprawić błędy.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Uwaga: pamiętaj, aby wywołania biblioteki umieścić w try...catch blokach. aby radzić sobie z nieoczekiwanymi błędami.

Zakończ śledzenie

Aby uniemożliwić dostawcy lokalizacji śledzenie przesyłki, usuń identyfikator śledzenia od dostawcy lokalizacji.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

Usuń dostawcę lokalizacji z widoku mapy

Poniższy przykład pokazuje, jak usunąć dostawcę lokalizacji z widoku mapy.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Dostosuj wygląd i styl mapy podstawowej

Aby dostosować wygląd i styl komponentu map: styl mapy za pomocą narzędzi działających w chmurze lub przez ustawienie opcji bezpośrednio w kodzie.

Używaj stylu mapy w chmurze

Definiowanie stylów map w Google Cloud pozwala tworzyć i edytować style mapy dla dowolnej aplikacji korzystającej z Map Google za pomocą konsoli Google Cloud bez konieczności wprowadzania zmian w kodzie. Style mapy są zapisywane jako identyfikatory map w projekcie Cloud. Aby zastosować styl do: JavaScriptu śledzenia przesyłki, określ mapId podczas tworzenia elementu JourneySharingMapView. Pola mapId nie można zmienić lub dodano po utworzeniu instancji JourneySharingMapView. Poniżej przykład pokazuje, jak włączyć wcześniej utworzony styl mapy z identyfikatorem mapy.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Używaj stylu mapy opartego na kodzie

Innym sposobem dostosowywania stylu mapy jest ustawienie mapOptions, gdy utwórz JourneySharingMapView.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Dostosowywanie znaczników

Za pomocą biblioteki śledzenia przesyłek JavaScript możesz dostosować wygląd ze znacznikami dodanymi do mapy. W tym celu należy podać znacznik które stosuje biblioteka śledzenia dostawy przed dodaniem i po każdej aktualizacji znacznika.

Najprostszym dostosowaniem jest określenie MarkerOptions obiekt, który zostanie zastosowany do wszystkich znaczników tego samego typu. Zmiany określone w obiekcie są stosowane po utworzeniu każdego znacznika, zastępując wszystkie opcje domyślne.

Bardziej zaawansowaną opcją jest określenie funkcji dostosowywania. Personalizacja pozwalają na określanie stylu znaczników na podstawie danych oraz dodawanie interaktywność ze znacznikami, na przykład obsługę kliknięć. Konkretnie: Wysyłka Śledzenie przekazuje do funkcji dostosowywania dane dotyczące typu obiektu znacznik reprezentuje pojazd lub cel podróży. Pozwoli to nadać stylom znacznika zmieniać się zależnie od bieżącego stanu samego elementu znacznika; Na przykład liczba zaplanowanych przystanków do momentu dotarcia do miejsca docelowego. Możesz nawet dołączyć z danymi ze źródeł spoza Fleet Engine i określ styl znacznika na podstawie te informacje.

Biblioteka śledzenia dostawy udostępnia następujące parametry dostosowania w FleetEngineShipmentLocationProviderOptions:

Zmień styl znaczników za pomocą atrybutu MarkerOptions

Ten przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą obiekt MarkerOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego przy użyciu dowolnych spośród wymienionych powyżej dostosowań.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Zmienianie stylu znaczników za pomocą funkcji dostosowywania

Przykład poniżej pokazuje, jak skonfigurować styl znacznika pojazdu. Obserwuj aby dostosować styl dowolnego znacznika za pomocą dowolnego ze znaczników wymienionych powyżej parametrów dostosowania.

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

Poniższy przykład pokazuje, jak dodać obsługę kliknięć do znacznika pojazdu. Postępuj zgodnie z tym wzorcem, aby dodać obsługę kliknięć do dowolnego znacznika za pomocą dowolnego ze znaczników wymienionych powyżej parametrów dostosowania.

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

Dostosowywanie linii łamanej

Dzięki bibliotece śledzenia przesyłki możesz też dostosować wygląd trasy przesyłki na mapie. Biblioteka tworzy google.maps.Polyline dla każdej pary współrzędnych w aktywnej lub pozostałej path. Możesz stylizować obiekty Polyline, określając niestandardowe ustawienia linii łamanej. Google stosuje te dostosowania w dwóch sytuacjach: przed dodaniem funkcji obiekty na mapie oraz gdy dane używane na potrzeby obiektów uległy zmianie.

Podobnie jak w przypadku dostosowywania znaczników, możesz tu określić zestaw PolylineOptions zostanie zastosowany do wszystkich pasujących obiektów Polyline podczas ich tworzenia lub zaktualizowane.

Możesz również określić funkcję dostosowywania. Funkcje dostosowywania pozwalają na dostosowywanie stylu obiektów na podstawie danych wysłanych przez Fleet Engine. Ta funkcja może zmieniać styl każdego obiektu w zależności od bieżącego stanu przesyłka; na przykład ciemniejsze odcienie obiektu Polyline lub tworząc grubość, gdy pojazd porusza się wolniej. Możesz nawet dołączyć do przeciw ze źródeł spoza Fleet Engine i na ich podstawie określ styl obiektu Polyline i informacjami o nich.

Dostosowania możesz określić za pomocą parametrów podanych w FleetEngineShipmentLocationProviderOptions Możesz ustawić dostosowania dla różnych stanów trasy w pojeździe – użytkownik już za podróżował, aktywnie podróżował lub jeszcze nie był. są następujące:

Zmień styl Polyline obiektów za pomocą PolylineOptions

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline. z PolylineOptions Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline za pomocą dowolnego z powyższych ustawień linii łamanej.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Zmień styl Polyline obiektu za pomocą funkcji dostosowywania

Poniższy przykład pokazuje, jak skonfigurować aktywny obiekt Polyline stylu. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline przy użyciu dowolnego z wymienionych wcześniej parametrów dostosowania linii łamanej.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Kontroluj widoczność obiektów Polyline

Domyślnie widoczne są wszystkie obiekty Polyline. Tworzenie obiektu Polyline niewidoczny, ustaw jego visible usługa:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Aby wyświetlać InfoWindow obok pojazdu lub znacznika lokalizacji

InfoWindow w celu wyświetlenia dodatkowych informacji na temat pojazdu lub znacznika lokalizacji.

Z przykładu poniżej dowiesz się, jak utworzyć i załączyć plik InfoWindow 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();

Wyłącz automatyczne dopasowanie

Możesz wyłączyć automatyczne dopasowywanie widocznego obszaru do mapy do pojazdu. i przewidywanej trasy, wyłączając automatyczne dopasowanie. Przykład poniżej pokazuje, jak wyłączyć automatyczne dopasowanie podczas konfigurowania udostępniania podróży widoku mapy.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

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

Zastępowanie istniejącej mapy

Aby zastąpić ciąg znaków za pomocą JavaScriptu, istniejąca mapa, która zawiera znaczniki lub inne dostosowania. bez utraty tych ustawień.

Załóżmy na przykład, że masz stronę internetową ze standardowym elementem google.maps.Map jednostka, w której jest wyświetlany znacznik:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Aby dodać bibliotekę do udostępniania czynności JavaScript:

  1. Dodaj kod fabryki tokenów uwierzytelniania.
  2. Zainicjuj dostawcę lokalizacji w funkcji initMap().
  3. Zainicjuj widok mapy w funkcji initMap(). Widok zawiera mapę.
  4. Przenieś dostosowanie do funkcji wywołania zwrotnego na potrzeby zainicjowania widoku mapy.
  5. Dodaj bibliotekę lokalizacji do wczytywania interfejsu API.

Poniższy przykład pokazuje zmiany, które należy wprowadzić:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Jeśli masz śledzoną przesyłkę z o podanym identyfikatorze w pobliżu Uluru, teraz zostanie wyświetlony na mapie.