Monitorowanie floty przy użyciu biblioteki śledzenia JavaScript

Biblioteka śledzenia floty w języku JavaScript umożliwia wizualizację lokalizacji pojazdów w ich flotach w czasie zbliżonym do rzeczywistego. Biblioteka korzysta z interfejsu Deliveries API, aby umożliwić wizualizację zarówno pojazdów dostawczych, jak i zadań. Podobnie jak biblioteka śledzenia przesyłek JavaScript, zawiera komponent mapy JavaScript, który zastępuje standardową encję google.maps.Map i komponenty danych do łączenia z Fleet Engine.

Komponenty

Biblioteka JavaScriptu

Widok mapy śledzenia floty

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

Przykład widoku mapy śledzenia floty

Dostawcy lokalizacji

Dostawcy lokalizacji korzystają z informacji przechowywanych we Fleet Engine, aby przesyłać dane o lokalizacji śledzonych obiektów do mapy udostępniania podróży.

Dostawca lokalizacji pojazdu dostawy

Dostawca lokalizacji pojazdu dostawy wyświetla informacje o lokalizacji pojedynczego pojazdu dostawczego. Zawiera on informacje o lokalizacji pojazdu i zadaniach, które wykonał pojazd dostawy.

Dostawca lokalizacji floty urządzeń

Dostawca lokalizacji floty pojazdów 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 opisano reguły widoczności obiektów śledzonych lokalizacji na mapie dla dostawcy wstępnie zdefiniowanej lokalizacji Fleet Engine. Dostawcy niestandardowych lub pochodnych lokalizacji 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 trasie niezależnie od swoich zadań.

Znaczniki lokalizacji zadań

Planowane przystanki są wyświetlane na mapie jako znaczniki przystanku dla pojazdów. Znaczniki ukończonych zadań są wyświetlane w innym stylu niż planowane przystanki pojazdu.

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

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

Przed użyciem biblioteki śledzenia flotowej w JavaScripcie zapoznaj się z usługą Fleet Engine i sprawdź, jak możesz uzyskać klucz interfejsu API. Następnie utwórz identyfikator zadania i zgłoszenie identyfikatora pojazdu dostawy.

Utwórz identyfikator zadania i deklarację identyfikatora pojazdu dostawy

Aby śledzić pojazdy dostawcze, korzystając z usług dostawcy lokalizacji pojazdu dostawy, utwórz token sieciowy JSON (JWT) z identyfikatorem zadania i deklaracją identyfikatora pojazdu dostawy.

Aby utworzyć ładunek JWT, dodaj w sekcji autoryzacji dodatkową deklarację 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żytkownik usługi Fleet Engine. Pamiętaj, że daje to szeroki dostęp z możliwością tworzenia, odczytu i modyfikowania encji Fleet Engine. Powinno być ono udostępniane tylko zaufanym użytkownikom.

Poniższy przykład pokazuje, 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 pobierać na Twoje serwery token z odpowiednimi deklaracjami za pomocą certyfikatu konta usługi w projekcie. Ważne jest, aby generować tokeny wyłącznie na serwerach i nigdy nie udostępniać certyfikatów klientom. W przeciwnym razie nagrasz zagrożenie dla bezpieczeństwa systemu.

Moduł pobierania musi zwrócić strukturę danych z 2 polami umieszczonymi w obiekcie Promise:

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

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

  • Nie ma prawidłowego tokena, na przykład jeśli nie wywołał modułu pobierania przy nowym wczytaniu strony lub wtedy, 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 wydanego wcześniej, wciąż ważnego tokena i nie wywołuje 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(),
  };
}

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

  • Punkt końcowy musi zwracać czas wygaśnięcia tokena. W przykładzie powyżej jest to data.ExpiresInSeconds.
  • Moduł pobierania tokenów uwierzytelniania musi przekazać do biblioteki czas wygaśnięcia (w sekundach, od czasu pobrania), 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

Ten przykład pokazuje, jak wczytać bibliotekę udostępniania ścieżek JavaScript z określonego adresu URL. Parametr callback wykonuje funkcję initMap po wczytaniu interfejsu API. Atrybut defer pozwala przeglądarce kontynuować renderowanie 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 pokazujemy, jak śledzić pojazd dostawczy za pomocą biblioteki śledzenia flot w JavaScripcie. Pamiętaj, aby przed uruchomieniem kodu załadować bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu.

Utwórz instancję dostawcy lokalizacji pojazdu

Biblioteka śledzenia flot w JavaScripcie wstępnie definiuje dostawcę lokalizacji dla interfejsu Fleet Engine Deliveries API. Utwórz instancję, korzystając z identyfikatora projektu i odwołania 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 załadowaniu biblioteki JavaScript Journey Share 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'), 
  locationProviders: [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'),
  locationProviders: [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łuchuj zdarzeń zmian

Możesz pobrać metadane o zadaniu z obiektu deliveryVehicle, korzystając z dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia na miejsce i pozostałą odległość przed następnym odbiorem lub wsadem pojazdu. Zmiany metadanych wywołują zdarzenie update. Z przykładu poniżej dowiesz się, jak nasłuchiwać zdarzeń zmian.

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, które występują asynchronicznie podczas wysyłania żądań informacji o pojazdach, 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);
});

Zakończ śledzenie

Aby uniemożliwić dostawcy lokalizacji śledzenie pojazdu dostawy, usuń identyfikator pojazdu dostawy od dostawcy lokalizacji.

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

Wyświetl flotę dostarczania

W tej sekcji pokazujemy, jak za pomocą biblioteki udostępniania JavaScriptu wyświetlić flotę dostarczania. Pamiętaj, aby przed uruchomieniem kodu załadować bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu.

Utwórz instancję dostawcy lokalizacji floty transportowej

Biblioteka śledzenia flot w JavaScripcie wstępnie definiuje dostawcę lokalizacji, który pobiera wiele pojazdów z interfejsu FleetEngine Deliveries API. Utwórz instancję, używając identyfikatora projektu oraz odwołania do modułu 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 używane do filtrowania pojazdów wyświetlanych na mapie. Ten filtr jest przekazywany bezpośrednio do Fleet Engine. Obsługiwane formaty znajdziesz na stronie ListDeliveryVehiclesRequest.filter.

locationRestriction ogranicza obszar, na którym pojazdy są wyświetlane na mapie. Wskazuje też, czy śledzenie lokalizacji jest aktywne. Dopóki go nie ustawisz, śledzenie lokalizacji nie zostanie uruchomione.

Po utworzeniu dostawcy lokalizacji zainicjuj widok mapy.

Ustawianie ograniczeń lokalizacji w widoku mapy

Granice locationRestriction można skonfigurować tak, aby pasowały do obszaru widocznego obecnie 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łuchuj zdarzeń zmian

Możesz pobrać metadane floty z obiektu deliveryVehicles za pomocą dostawcy lokalizacji. Metadane obejmują właściwości pojazdu, takie jak stan nawigacji, pozostały dystans i atrybuty niestandardowe. Więcej informacji znajdziesz w dokumentacji referencyjnej. Zmiana metainformacji aktywuje zdarzenie update. Z przykładu poniżej dowiesz się, jak wsłuchiwać się w zdarzenia 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, które powstają asynchronicznie w wyniku żądania informacji o flocie dostarczania, wywołują zdarzenia błędów. Przykłady wykrywania, jak nasłuchiwać tych zdarzeń, znajdziesz w sekcji Wykrywanie błędów.

Zakończ śledzenie

Aby uniemożliwić dostawcy lokalizacji śledzenie floty dostarczania, ustaw granice dostawcy lokalizacji na wartość null.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

Śledź pojazd dostawczy, wyświetlając flotę dostawczą

Podczas przeglądania floty możesz wyświetlić trasę i nadchodzące zadania dla określonego pojazdu dostawy. Aby to zrobić, utwórz wystąpienia dostawcy lokalizacji flot dostawy i dostawcy lokalizacji pojazdu dostawy, a następnie dodaj je do widoku mapy:

JavaScript

deliveryFleetLocationProvider =
    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"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

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

TypeScript

deliveryFleetLocationProvider =
    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"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

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

Dostawca lokalizacji floty zaczyna wyświetlać na mapie pojazdy dostawcze. Skorzystaj z dostosowania znacznika, aby dostawca lokalizacji pojazdu dostawy mógł śledzić pojazd dostawczy po kliknięciu znacznika floty:

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

Ukryj znacznik u dostawcy lokalizacji pojazdu dostawy, aby zapobiec wyrenderowaniu dwóch znaczników dla tego samego pojazdu:

JavaScript

// Specify the customization function either separately, or as a field in 
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

Dostosuj wygląd i styl mapy podstawowej

Aby dostosować wygląd i styl mapy, określ styl mapy, korzystając z narzędzi działających w chmurze lub ustawiając opcje bezpośrednio w kodzie.

Używaj stylu mapy w chmurze

Definiowanie stylów map w Google Cloud pozwala tworzyć i edytować style mapy dla dowolnych aplikacji korzystających z Map Google, korzystając z konsoli Google Cloud, bez konieczności wprowadzania zmian w kodzie. Style mapy są zapisywane jako identyfikatory map w projekcie Cloud. Aby zastosować styl do mapy śledzenia flot w JavaScripcie, podczas tworzenia elementu JourneySharingMapView podaj mapId. Po utworzeniu instancji JourneySharingMapView nie można zmienić ani dodać pola mapId. Poniższy 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'
  }
});

TypeScript

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

Używaj stylu mapy opartego na kodzie

Innym sposobem dostosowania stylu mapy jest ustawienie mapOptions podczas tworzenia elementu 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 flot w JavaScripcie możesz dostosować wygląd i sposób działania znaczników dodanych do mapy. Aby to zrobić, określ dostosowania znaczników, które biblioteka śledzenia floty będzie stosować przed dodaniem znaczników do mapy i po każdej aktualizacji znaczników.

Najprostsze dostosowanie to określenie obiektu MarkerOptions, który będzie stosowany 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. Funkcje dostosowywania pozwalają na określanie stylu znaczników na podstawie danych oraz dodawanie do znaczników interaktywnych elementów, np. obsługi kliknięć. W szczególności funkcja śledzenia floty przekazuje do funkcji dostosowywania dane dotyczące typu obiektu reprezentowanego przez znacznik: pojazdu, przystanku lub zadania. Dzięki temu styl znacznika może się zmieniać zależnie od bieżącego stanu samego elementu znacznika, np. liczby pozostałych przystanków czy typu zadania. Możesz nawet złączać dane ze źródeł spoza Fleet Engine i nadawać znacznikom styl na podstawie tych informacji.

Ponadto możesz za pomocą funkcji dostosowywania filtrować widoczność znaczników. Aby to zrobić, wywołaj na znaczniku funkcję setVisible(false).

Jednak ze względu na wydajność zalecamy filtrowanie przy użyciu natywnego filtrowania u dostawcy lokalizacji, np. FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter. Jeśli jednak potrzebujesz dodatkowych funkcji filtrowania, możesz zastosować filtrowanie za pomocą funkcji dostosowywania.

Biblioteka śledzenia floty udostępnia te parametry dostosowania:

Zmień styl znaczników za pomocą atrybutu MarkerOptions

Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą obiektu MarkerOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego znacznika za pomocą wymienionych powyżej parametrów dostosowywania znaczników.

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. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego znacznika za pomocą dowolnych parametrów dostosowywania 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. Postępuj zgodnie z tym wzorcem, aby dodać obsługę kliknięć do dowolnego znacznika za pomocą dowolnego z wymienionych wyżej parametrów dostosowywania znaczników.

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

Poniższy przykład pokazuje, jak filtrować widoczne znaczniki pojazdu. Postępuj zgodnie z tym wzorcem, aby filtrować wszystkie znaczniki z użyciem 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);
    }
  };

Dostosowywanie linii łamanej podczas podążania za pojazdem dostawczym

Za pomocą biblioteki śledzenia flot w JavaScripcie możesz też dostosować na mapie wygląd i sposób działania śledzonej trasy pojazdu. Biblioteka tworzy obiekt google.maps.Polyline dla każdej pary współrzędnych na aktywnej lub pozostałej ścieżce pojazdu. Możesz stylizować obiekty Polyline, określając niestandardowe ustawienia linii łamanej. Następnie biblioteka stosuje te dostosowania w 2 sytuacjach: przed dodaniem obiektów do mapy i gdy dane używane przez te obiekty ulegną zmianie.

Podobnie jak w przypadku dostosowywania znaczników możesz określić zestaw PolylineOptions, który będzie stosowany do wszystkich pasujących obiektów Polyline podczas ich tworzenia lub aktualizacji.

Możesz również określić funkcję dostosowywania. Funkcje dostosowywania pozwalają na określanie indywidualnego stylu obiektów na podstawie danych przesłanych przez Fleet Engine. Ta funkcja może zmieniać styl każdego obiektu w zależności od aktualnego stanu pojazdu. Na przykład kolorowanie obiektu Polyline ciemniejszym odcieniem lub zwiększanie jego grubości, gdy pojazd porusza się wolniej. Możesz nawet złączać ze źródeł spoza Fleet Engine i określać styl obiektu Polyline na podstawie tych informacji.

Możesz określić dostosowania za pomocą parametrów podanych w zadaniu FleetEngineDeliveryVehicleLocationProviderOptions. Możesz ustawić dostosowania dla różnych stanów trasy na trasie pojazdu – już przebyty, aktywnie podróżujący lub jeszcze nie pokonany. Parametry są następujące:

Zmień styl Polyline obiektów za pomocą PolylineOptions

Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline za pomocą PolylineOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline za pomocą wymienionych wcześniej dostosowań linii łamanych.

JavaScript

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

TypeScript

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

Zmień styl Polyline obiektu za pomocą funkcji dostosowywania

Z przykładu poniżej dowiesz się, jak za pomocą funkcji dostosowywania skonfigurować styl aktywnego obiektu Polyline. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline za pomocą dowolnych 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.deliveryVehicle.remainingDistanceMeters;
    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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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. Aby obiekt Polyline był niewidoczny, ustaw jego właściwość visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Aby wyświetlać InfoWindow obok pojazdu lub znacznika lokalizacji

Aby wyświetlić dodatkowe informacje o pojeździe lub znaczniku lokalizacji, możesz użyć znaku InfoWindow.

Poniższy przykład pokazuje, 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 dopasowywanie widocznego obszaru do pojazdu i przewidywanej trasy na mapie. W tym celu wyłącz automatyczne dopasowanie. Z przykładu poniżej dowiesz się, jak wyłączyć automatyczne dopasowanie podczas konfigurowania widoku mapy udostępniania podróży.

JavaScript

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

TypeScript

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

Zastępowanie istniejącej mapy

Istniejącą mapę, która zawiera znaczniki lub inne dostosowania, możesz zastąpić bez utraty tych dostosowań.

Załóżmy np., że masz stronę internetową ze standardowym elementem google.maps.Map, na którym 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, która obejmuje śledzenie floty:

  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. 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'),
    locationProviders: [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 masz pojazd dostawczy o określonym identyfikatorze w pobliżu Uluru, będzie on teraz widoczny na mapie.