Monitorowanie floty przy użyciu biblioteki śledzenia JavaScript

Biblioteka śledzenia floty w języku JavaScript umożliwia wizualizację lokalizacji pojazdów w ich flotach niemal w czasie rzeczywistym. Biblioteka korzysta z interfejsu Deliveries API do wizualizacji pojazdów dostawczych oraz zadań. Podobnie jak biblioteka śledzenia dostawy w języku JavaScript zawiera ona komponent mapy w języku JavaScript, który zastępuje standardowy element google.maps.Map oraz komponenty danych w celu łączenia się z Fleet Engine.

Komponenty

Biblioteka śledzenia floty w języku JavaScript zawiera komponenty do wizualizacji pojazdów dostawczych i przystanków, a także nieprzetworzone pliki danych na temat szacowanego czasu dotarcia lub pozostałej odległości do dostawy.

Widok mapy Fleet Tracking

Komponent widoku mapy śledzenia floty wizualizuje lokalizację pojazdów i zadań. Jeśli trasa pojazdu jest znana, komponent widoku mapy animuje ten pojazd, gdy porusza się on po przewidywanej trasie.

Przykład widoku mapy ze śledzeniem floty

Dostawcy lokalizacji

Dostawcy lokalizacji wykorzystują informacje przechowywane w Fleet Engine, aby wysyłać informacje o lokalizacji śledzonych obiektów na mapę udostępniania podróży.

Dostawca lokalizacji pojazdu dostawy

Dostawca usługi lokalizacji pojazdu kurierskiego wyświetla informacje o lokalizacji pojedynczego pojazdu kurierskiego. Zawiera on informacje o lokalizacji pojazdu i zadaniach wykonanych przez niego.

Dostawca lokalizacji floty dostaw

Dostawca lokalizacji floty dostaw wyświetla informacje o lokalizacji wielu pojazdów. Możesz filtrować według konkretnych pojazdów lub lokalizacji albo wyświetlić całą flotę.

Kontrolowanie widoczności śledzonych lokalizacji

W tej sekcji opisujemy reguły widoczności śledzonych obiektów lokalizacji na mapie dla wstępnie zdefiniowanego dostawcy lokalizacji Fleet Engine. Dostawcy usług niestandardowych lub derywowanych mogą zmieniać reguły widoczności.

Pojazdy dostawcze

Pojazd dostawczy jest widoczny od razu po utworzeniu we Fleet Engine i jest widoczny na całej jego trasie niezależnie od zadań, które nim wykonywa.

Znaczniki lokalizacji zadań

Planowane postoje pojazdów są wyświetlane na mapie jako znaczniki postojów. Znaczniki ukończonych zadań są wyświetlane w innym stylu niż planowane przystanki w pojeździe.

Lokalizacja wyników zadania jest wyświetlana wraz ze znacznikami wyników zadania. Zadania z wynikiem SUCCEEDED są wyświetlane ze znacznikami zakończonych zadań, a wszystkie pozostałe – ze znacznikami nieudanych.

Pierwsze kroki z biblioteką śledzenia floty w języku JavaScript

Zanim użyjesz biblioteki śledzenia floty w języku JavaScript, sprawdź, czy znasz Fleet Engine i jak uzyskać klucz interfejsu API. Następnie utwórz identyfikator zadania i roszczenie identyfikatora pojazdu dostawy.

Tworzenie identyfikatora zadania i roszczenia o identyfikator pojazdu dostawczego

Aby śledzić pojazdy dostawcze za pomocą dostawcy lokalizacji pojazdu dostawy, utwórz token sieciowy JSON (JWT) z identyfikatorem zadania i deklaracjami identyfikatora pojazdu dostawy.

Aby utworzyć ładunek JWT, dodaj w sekcji autoryzacji dodatkowe zadeklarowanie z kluczami taskid i deliveryvehicleid, a następnie ustaw wartość każdego klucza na *. Token należy utworzyć z użyciem roli Cloud IAM superużytkownika Fleet Engine. Daje to szeroki dostęp do tworzenia, odczytu i modyfikowania encji Fleet Engine. Należy go udostępniać tylko zaufanym użytkownikom.

Z przykładu poniżej dowiesz się, jak utworzyć token do śledzenia według pojazdu i zadania:

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

Tworzenie modułu pobierania tokenów uwierzytelniania

Możesz utworzyć moduł pobierania tokenów uwierzytelniania, aby pobrać token wykryty z odpowiednimi deklaracjami na Twoich serwerach przy użyciu certyfikatu konta usługi dla Twojego projektu. Ważne jest, aby tokeny generować tylko na swoich serwerach i nigdy nie udostępniać certyfikatów żadnym klientom. Jeśli tego nie zrobisz, bezpieczeństwo Twojego systemu będzie narażone na niebezpieczeństwo.

Moduł pobierania musi zwrócić strukturę danych z 2 polami ujętymi w obietnicę:

  • Ciąg tekstowy token.
  • Numer expiresInSeconds. Token wygasa po tym czasie po pobraniu.

Biblioteka śledzenia floty JavaScriptu żąda tokena za pomocą modułu pobierania tokenów uwierzytelniania, gdy jest spełniony dowolny z tych warunków:

  • Nie ma ona prawidłowego tokena, na przykład nie wywołała modułu pobierania przy nowym wczytaniu strony lub nie zwróciła przy użyciu tokena.
  • Pobrany wcześniej token wygasł.
  • Token, który został pobrany wcześniej, przypada w ciągu minuty od wygaśnięcia.

W przeciwnym razie biblioteka używa wcześniej wydanego, ale nadal prawidłowego tokena i nie wywołuje modułu pobierania.

Z przykładu poniżej dowiesz się, 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(),
  };
}

Implementując punkt końcowy po stronie serwera do generowania tokenów, pamiętaj o tych kwestiach:

  • Punkt końcowy musi zwrócić czas wygaśnięcia tokena. W powyższym przykładzie jest to wartość data.ExpiresInSeconds.
  • Moduł pobierania tokenów uwierzytelniania musi przekazać do biblioteki czas wygaśnięcia (w sekundach, od czasu pobrania) do biblioteki, jak pokazano w przykładzie.
  • Adres URL serwera SERVER_TOKEN_URL zależy od implementacji backendu. Oto URL-e przykładowego backendu aplikacji:
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/czytnik_floty

Wczytywanie mapy z HTML

Poniższy przykład pokazuje, jak wczytać bibliotekę udostępniania czynności w JavaScript z określonego adresu URL. Parametr callback wykonuje funkcję initMap po wczytaniu interfejsu API. Atrybut defer umożliwia przeglądarce kontynuowanie renderowania pozostałej części 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ź pojazd dostawczy

W tej sekcji dowiesz się, jak śledzić pojazd dostawczy za pomocą biblioteki śledzenia floty w języku JavaScript. Przed uruchomieniem kodu pamiętaj, aby załadować bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu.

Utwórz dostawcę lokalizacji pojazdu dostawczego

Biblioteka śledzenia floty w JavaScript wstępnie definiuje dostawcę lokalizacji dla interfejsu Fleet Engine Deliveries API. Aby utworzyć instancję, użyj identyfikatora projektu i odniesienia do fabryki tokenów.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

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

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

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

Inicjowanie widoku mapy

Po wczytaniu biblioteki JavaScript udostępniania czynności w języku JavaScript zainicjuj widok mapy i dodaj go do strony HTML. Strona powinna zawierać element <div> z widokiem mapy. W poniższym przykładzie element <div> ma nazwę map_canvas.

JavaScript

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

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);

Nasłuchiwanie zdarzeń zmian

Możesz pobrać metadane o zadaniu z obiektu deliveryVehicle, korzystając z dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia na miejsce oraz odległość do momentu następnego odbioru lub wysyłki pojazdu. Zmiany w metainformacjach wywołują zdarzenie update. Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń zmiany.

JavaScript

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

TypeScript

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

Wykrywaj błędy

Błędy powstałe asynchronicznie w wyniku żądania informacji o pojeździe wykonującym dostawę wywołują zdarzenia błędów. Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń w celu obsługi błędów.

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

Wyświetlanie floty dostaw

W tej sekcji pokazujemy, jak wyświetlić flotę dostawców za pomocą biblioteki udostępniania czynności JavaScript w JavaScript. Przed uruchomieniem kodu pamiętaj, aby załadować bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu.

Tworzenie instancji dostawcy lokalizacji floty dostaw

Biblioteka śledzenia floty JavaScriptu wstępnie definiuje dostawcę lokalizacji, który pobiera wiele pojazdów z interfejsu FleetEngine Deliveries API. Aby utworzyć instancję, użyj identyfikatora projektu oraz odwołania do narzędzia do pobierania tokenów.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleFilter określa zapytanie służące do filtrowania pojazdów wyświetlanych na mapie. Ten filtr jest przekazywany bezpośrednio do Fleet Engine. Obsługiwane formaty znajdziesz w sekcji ListDeliveryVehiclesRequest.filter.

locationRestriction ogranicza obszar, na którym pojazdy są wyświetlane na mapie. Kontroluje także, czy śledzenie lokalizacji jest aktywne. Jeśli tego nie zrobisz, śledzenie lokalizacji nie rozpocznie się.

Po utworzeniu dostawcy lokalizacji zainicjuj widok mapy.

Ustaw ograniczenie lokalizacji przy użyciu widocznego obszaru mapy

Granice locationRestriction można skonfigurować tak, aby pasowały do obszaru obecnie widocznego w widoku mapy.

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Nasłuchiwanie zdarzeń zmian

Możesz pobrać metadane o flocie z obiektu deliveryVehicles za pomocą dostawcy lokalizacji. Metainformacje obejmują właściwości pojazdu, takie jak stan nawigacji, pozostała odległość i atrybuty niestandardowe. Więcej informacji znajdziesz w dokumentacji referencyjnej. Zmiana metainformacji wyzwala zdarzenie aktualizacji. Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń zmiany.

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

Wykrywaj błędy

Błędy występujące asynchronicznie w wyniku żądania informacji o flocie dostarczania wywołują zdarzenia błędów. Przykłady wykrywania tych zdarzeń znajdziesz w sekcji Wykrywaj błędy.

Dostosuj wygląd i styl mapy podstawowej

Aby dostosować wygląd i styl komponentu map, zmień styl mapy za pomocą narzędzi działających w chmurze lub ustawiając opcje bezpośrednio w kodzie.

Użyj stylu mapy opartego na chmurze

Definiowanie stylów map w Google Cloud pozwala tworzyć i edytować style mapy w dowolnej aplikacji korzystającej z Map Google z poziomu konsoli Google Cloud bez konieczności wprowadzania zmian w kodzie. Style mapy są zapisywane jako identyfikatory map w Twoim projekcie Cloud. Aby zastosować styl do mapy śledzenia floty JavaScriptu, podczas tworzenia obiektu JourneySharingMapView określ mapId. Po utworzeniu wystąpienia JourneySharingMapView nie można zmienić ani dodać pola mapId. Z przykładu poniżej dowiesz się, jak włączyć utworzony wcześniej styl mapy z identyfikatorem mapy.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProvider: locationProvider,
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProvider: locationProvider,
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

Użyj stylu mapy opartego na kodzie

Innym sposobem dostosowania stylu mapy jest ustawienie mapOptions podczas tworzenia tagu JourneySharingMapView.

JavaScript

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

TypeScript

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

Zmienianie stylu i widoczności tras

Aby skonfigurować styl i widoczność podejmowanych i przewidywanych tras, użyj niestandardowych opcji stylu. Więcej informacji znajdziesz w artykule o interfejsie PolylineOptions.

Z przykładu poniżej dowiesz się, jak skonfigurować styl i widoczność przewidywanych tras. Aby skonfigurować styl i widoczność robionych tras, użyj takenRoutePolylineSetup zamiast anticipatedRoutePolylineSetup.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup({
    defaultPolylineOptions, defaultVisible}) {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  defaultPolylineOptions.strokeOpacity = 0.5;
  defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineOptionsSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

TypeScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup(options: {
  defaultPolylineOptions: google.maps.PolylineOptions,
  visible: boolean,
}): {
  polylineOptions: google.maps.PolylineOptions,
  visible: boolean,
} {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  options.defaultPolylineOptions.strokeOpacity = 0.5;
  options.defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: options.defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

Skorzystaj z dostosowań znaczników

W bibliotece śledzenia floty w języku JavaScript możesz dostosować wygląd i styl znaczników dodanych do mapy. W tym celu musisz określić ustawienia znaczników, które zostaną następnie zastosowane w bibliotece śledzenia floty przed dodaniem znaczników do mapy i po każdej ich aktualizacji.

Najprostsze dostosowanie to określenie obiektu MarkerOptions, który będzie stosowany do wszystkich znaczników tego samego typu. Zmiany określone w obiekcie zostaną zastosowane po utworzeniu każdego znacznika, zastępując wszystkie opcje domyślne.

Bardziej zaawansowaną opcją jest określenie funkcji dostosowywania. Funkcje dostosowywania umożliwiają nadawanie stylu znaczników na podstawie danych, a także dodawanie do znaczników elementów interaktywnych, np. obsługi kliknięć. W szczególności śledzenie floty przekazuje do funkcji dostosowywania dane o typie obiektu reprezentowanego przez znacznik: pojazdu, przystanku lub zadania. Dzięki temu styl znaczników może się zmieniać w zależności od bieżącego stanu samego elementu znacznika, np. liczby pozostałych przystanków lub typu zadania. Możesz nawet złączać się z danymi ze źródeł spoza Fleet Engine i dostosowywać na ich podstawie styl znacznika.

Możesz też użyć funkcji dostosowywania do filtrowania widoczności znacznika. Aby to zrobić, wywołaj na znaczniku setVisible(false).

Jednak ze względu na wydajność zalecamy użycie filtra natywnego u dostawcy lokalizacji, np. FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter. Jeśli jednak potrzebujesz dodatkowych funkcji filtrowania, możesz zastosować filtr, korzystając z funkcji dostosowywania.

Biblioteka śledzenia floty udostępnia te parametry dostosowania:

Zmień styl znaczników za pomocą: MarkerOptions

Z przykładu poniżej dowiesz się, jak skonfigurować styl znacznika pojazdu za pomocą obiektu MarkerOptions. Użyj tego wzoru, by dostosować styl dowolnego znacznika za pomocą dowolnych parametrów dostosowywania wymienionych powyżej.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Zmiana stylu znaczników przy użyciu funkcji dostosowywania

Poniższy przykład pokazuje, jak skonfigurować styl oznakowania pojazdu. Użyj tego wzoru, aby dostosować styl dowolnego znacznika za pomocą dowolnych parametrów dostosowania znaczników wymienionych powyżej.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

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

Poniższy przykład pokazuje, jak dodać obsługę kliknięć do znacznika pojazdu. Użyj tego wzoru, by dodać obsługę kliknięć do dowolnego znacznika za pomocą dowolnego z wymienionych powyżej parametrów dostosowania znacznika.

JavaScript

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

TypeScript

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

Filtruj widoczne znaczniki

Z przykładu poniżej dowiesz się, jak filtrować widoczne znaczniki pojazdów. Użyj tego wzorca, aby przefiltrować wszystkie znaczniki za pomocą dowolnych parametrów dostosowania znaczników wymienionych powyżej.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Wyświetl InfoWindow dla znacznika pojazdu lub lokalizacji

Korzystając z InfoWindow, możesz wyświetlić dodatkowe informacje o pojeździe lub znaczniku lokalizacji.

Z przykładu poniżej dowiesz się, jak utworzyć obiekt InfoWindow i dołączyć go do znacznika pojazdu.

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 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 dopasowanie widocznego obszaru do pojazdu i przewidywanej trasy, wyłączając automatyczne dopasowanie. Z przykładu poniżej dowiesz się, jak wyłączyć automatyczne dopasowanie podczas konfigurowania widoku mapy z udostępnianiem trasy.

JavaScript

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

TypeScript

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

Zastępowanie istniejącej mapy

Możesz zastąpić istniejącą mapę, która zawiera znaczniki i inne ustawienia, bez utraty tych dostosowań.

Załóżmy na przykład, że masz stronę internetową ze standardowym elementem google.maps.Map, na którym wyświetla się 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ę udostępniania przebiegu w JavaScript, która obejmuje śledzenie floty:

  1. Dodaj kod fabryki tokenów uwierzytelniania.
  2. Inicjowanie dostawcy lokalizacji w funkcji initMap().
  3. Zainicjuj widok mapy w funkcji initMap(). Widok zawiera mapę.
  4. Przenieś swoje modyfikacje do funkcji wywołania zwrotnego w celu inicjowania widoku mapy.
  5. Dodaj bibliotekę lokalizacji do programu wczytującego interfejs API.

Przykład poniżej pokazuje zmiany do wprowadzenia:

<!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. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

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

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_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, which includes Fleet Tracking functionality.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Jeśli prowadzisz pojazd dostawczy o określonym identyfikatorze w pobliżu Uluru, będzie on teraz renderowany na mapie.