Monitorowanie floty przy użyciu biblioteki śledzenia JavaScript

Biblioteka śledzenia floty 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 i zadań. Podobnie jak biblioteka JavaScript do śledzenia przesyłek, zawiera ona komponent mapy JavaScript, który zastępuje standardowy encję google.maps.Map i komponenty danych w celu połączenia z Fleet Engine.

Komponenty

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

Widok mapy ze śledzeniem floty

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

Dostawcy usług lokalizacyjnych

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

Dostawca usługi lokalizacji pojazdu dostawy

Dostawca lokalizacji pojazdu dostarczającego wyświetla informacje o lokalizacji pojedynczego pojazdu. Zawiera on informacje o lokalizacji pojazdu i zadaniach wykonanych przez niego.

Dostawca lokalizacji floty dostarczania

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 na mapie dla śledzonych obiektów lokalizacji dla wstępnie zdefiniowanego dostawcy lokalizacji Fleet Engine. Niestandardowi lub wyznaczeni dostawcy 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 przejazdu niezależnie od jego zadań.

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.

Lokalizacja wyników zadań jest wyświetlana za pomocą znaczników wyników zadania. Zadania o wyniku SUCCEEDED są wyświetlane ze znacznikami zakończonych zadań, a pozostałe – ze znacznikami nieudanych.

Pierwsze kroki z biblioteką śledzenia floty JavaScript

Zanim użyjesz biblioteki śledzenia floty JavaScriptu, zapoznaj się z Fleet Engine i dowiedz się, jak uzyskać klucz API. Następnie utwórz identyfikator zadania i identyfikator pojazdu dostawy.

Tworzenie identyfikatora zadania i identyfikatora pojazdu dostawy

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 deklaracje z kluczami taskid i deliveryvehicleid, a następnie ustaw wartość każdego klucza na *. Token należy utworzyć przy użyciu roli Cloud IAM superużytkownika Fleet Engine. Daje to szeroki dostęp do tworzenia, odczytywania i modyfikowania encji Fleet Engine. Należy go udostępniać 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 pobrać na swoje serwery token z odpowiednimi deklaracjami przy użyciu certyfikatu konta usługi przypisanego do Twojego projektu. Pamiętaj, aby generować tokeny tylko na swoich serwerach i nigdy nie udostępniać certyfikatów żadnym klientom. W przeciwnym razie naraża to bezpieczeństwo systemu.

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

• Ciąg znaków 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 gdy nie wywołał modułu pobierania przy nowym wczytaniu strony lub gdy moduł pobierania nie zwrócił przy użyciu tokena.
• Pobrany wcześniej token wygasł.
• Token, który został wcześniej pobrany, przypada w ciągu minuty od wygaśnięcia.

W przeciwnym razie biblioteka używa wcześniej wystawionego tokena, który nadal jest prawidłowy i nie wywołuje modułu pobierania.

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

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

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 zwracać datę wygaśnięcia tokena. W powyższym przykładzie jest on podany jako data.ExpiresInSeconds.
• Zgodnie z przykładem narzędzie pobierania tokenów uwierzytelniania musi przekazać czas wygaśnięcia (w sekundach, od czasu pobrania) do biblioteki.
• Wartość SERVER_TOKEN_URL zależy od implementacji backendu. Oto URL-e 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ć bibliotekę udostępniania sekwencji ścieżki JavaScript z określonego adresu URL. Parametr callback wykonuje funkcję initMap po wczytaniu interfejsu API. Atrybut defer umożliwia przeglądarce kontynuowanie renderowania 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>

Obserwuj pojazd dostawczy

W tej sekcji dowiesz się, jak śledzić pojazd dostawczy za pomocą biblioteki śledzenia floty JavaScriptu. 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 dostawczego

Biblioteka śledzenia floty 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.

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

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

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 udostępniania ścieżki JavaScript JavaScript zainicjuj widok mapy i dodaj go do strony HTML. Strona powinna zawierać element <div>, który utrzymuje widok mapy. W poniższym przykładzie element <div> ma nazwę map_canvas.

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

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

Wykrywaj zmiany

Możesz pobrać metainformacje o zadaniu z obiektu deliveryVehicle, korzystając z dostawcy lokalizacji. Metainformacje zawierają szacowany czas dotarcia oraz odległość do miejsca, w którym pojazd będzie pod ręką. Zmiany w metainformacjach wywołują zdarzenie update. Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń zmiany.

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

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 powstające asynchronicznie w wyniku żądania informacji o pojazdach dostawczych wywołują zdarzenia błędu. Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń w celu obsługi błędów.

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

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 kurierskiego, usuń z niego identyfikator pojazdu.

locationProvider.deliveryVehicleId = '';

locationProvider.deliveryVehicleId = '';

Usuń dostawcę lokalizacji z widoku mapy

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Wyświetlanie floty dostawczej

W tej sekcji pokazujemy, jak za pomocą biblioteki udostępniania przebiegu JavaScript 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

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 odniesienia do narzędzia do pobierania tokenów.

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

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 w sekcji ListDeliveryVehiclesRequest.filter.

locationRestriction ogranicza obszar, na którym pojazdy są wyświetlane na mapie. Określa też, czy śledzenie lokalizacji ma być aktywne. Bez tego śledzenie lokalizacji nie rozpocznie się.

Po utworzeniu dostawcy lokalizacji zainicjuj widok mapy.

Ustawianie ograniczenia lokalizacji na podstawie widocznego obszaru mapy

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

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

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

Wykrywaj zmiany

Możesz pobrać metadane o flocie z obiektu deliveryVehicles, korzystając z dostawcy lokalizacji. Metainformacje zawierają właściwości pojazdu, takie jak stan nawigacji, pozostała odległość i atrybuty niestandardowe. Więcej informacji znajdziesz w dokumentacji referencyjnej. Zmiana metadanych powoduje wywołanie zdarzenia aktualizacji. Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń zmiany.

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

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 pojawiające się asynchronicznie w wyniku żądania informacji o flocie dostarczania, wywołują zdarzenia błędów. Przykłady nasłuchiwania tych zdarzeń znajdziesz w sekcji Nasłuchiwanie błędów.

Zakończ śledzenie

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

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

Usuń dostawcę lokalizacji z widoku mapy

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Śledź pojazd dostawczy i obserwuj flotę

Podczas wyświetlania floty możesz pokazać trasę i nadchodzące zadania dla konkretnego pojazdu dostawczego. Aby to zrobić, utwórz instancję dostawcy lokalizacji floty dostaw i dostawcę lokalizacji pojazdu dostarczającego, po czym dodaj je do widoku mapy:

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

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 dostaw zaczyna wyświetlać pojazdy dostawcze na mapie. Skorzystaj z funkcji dostosowywania znaczników, aby umożliwić dostawcy lokalizacji pojazdu dostawczego śledzenie tego pojazdu po kliknięciu znacznika jego floty:

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

// 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 dostawczego, aby uniknąć renderowania 2 znaczników dla tego samego pojazdu:

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

// 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 komponentu mapy, 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

Style map w Google Cloud pozwalają tworzyć i edytować style mapy w dowolnych aplikacjach korzystających z Map Google z poziomu 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 floty JavaScript, podczas tworzenia JourneySharingMapView określ 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.

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

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

Użyj stylu mapy opartego na kodzie

Innym sposobem dostosowywania stylu mapy jest ustawienie mapOptions podczas tworzenia elementu JourneySharingMapView.

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

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

Dostosuj znaczniki

Za pomocą biblioteki śledzenia floty JavaScript możesz dostosować wygląd i działanie znaczników dodanych do mapy. W tym celu musisz określić dostosowania znaczników, które będzie stosować Biblioteka śledzenia floty przed dodaniem znaczników do mapy i każdą ich aktualizacją.

Najprostszym sposobem dostosowania jest określenie obiektu MarkerOptions, 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. Funkcje dostosowywania umożliwiają określanie stylu znaczników na podstawie danych, a także dodawanie do znaczników elementów interaktywnych, np. obsługi kliknięć. Ś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ć zależnie od bieżącego stanu samego elementu znacznika, np. liczby pozostałych przystanków lub typu zadania. Możesz nawet złączać z danymi ze źródeł spoza Fleet Engine i na tej podstawie określać styl znacznika.

Możesz też użyć funkcji dostosowywania do filtrowania widoczności znaczników. 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:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Zmień styl znaczników za pomocą: MarkerOptions

Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą obiektu MarkerOptions. Korzystając z tego wzoru, możesz dostosować styl dowolnego znacznika za pomocą powyższych parametrów.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Zmiana stylu znaczników za pomocą funkcji dostosowywania

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

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

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

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

Przykład poniżej pokazuje, jak dodać obsługę kliknięć do znacznika pojazdu. Postępuj zgodnie z tym wzorcem, aby dodać obsługę kliknięć do dowolnego znacznika z wykorzystaniem dowolnego z wymienionych powyżej parametrów dostosowania znacznika.

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

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. Korzystając z tego wzorca, możesz filtrować znaczniki, korzystając z wymienionych powyżej parametrów dostosowania znaczników.

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

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

Używaj dostosowań linii łamanej podczas objazdu pojazdem dostawczym

Za pomocą biblioteki śledzenia floty JavaScript możesz też dostosować wygląd i zachowanie na mapie trasy śledzonego pojazdu. Biblioteka tworzy obiekt google.maps.Polyline dla każdej pary współrzędnych na aktywnej lub pozostałej ścieżce pojazdu. Możesz określić styl obiektów Polyline, określając dostosowania linii łamanej. Biblioteka stosuje te dostosowania w 2 sytuacjach: przed dodaniem obiektów do mapy i gdy zmienią się dane używane do tych obiektów.

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

Możesz także określić funkcję dostosowywania. Funkcje dostosowywania umożliwiają nadawanie im indywidualnych stylów obiektów na podstawie danych wysyłanych przez Fleet Engine. Funkcja może zmienić styl każdego obiektu w zależności od bieżącego stanu pojazdu, np. nałożyć głębszy odcień obiektu Polyline lub pogrubić go, gdy pojazd jedzie wolniej. Możesz nawet złączać się ze źródeł spoza Fleet Engine i na tej podstawie określać styl obiektu Polyline.

Możesz określić dostosowania za pomocą parametrów w FleetEngineDeliveryVehicleLocationProviderOptions. Możesz dostosować ustawienia dla różnych stanów na trasie pojazdu – już w podróży, w trakcie podróży lub jeszcze nie. Parametry są następujące:

• takenPolylineCustomization, w przypadku już przebytej trasy;
• activePolylineCustomization, w przypadku aktywnie poruszającej się ścieżki;
• remainingPolylineCustomization, jeśli jeszcze nie przebyta trasa.

Zmień styl obiektów Polyline za pomocą elementu PolylineOptions

Przykład poniżej pokazuje, jak skonfigurować styl obiektu Polyline w PolylineOptions. Korzystając z tego wzorca, możesz dostosować styl dowolnego obiektu Polyline za pomocą dowolnych spośród opisanych wcześniej dostosowań linii łamanych.

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

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

Zmień styl obiektów Polyline za pomocą funkcji dostosowywania

Poniższy przykład pokazuje, jak skonfigurować styl dla aktywnego obiektu Polyline za pomocą funkcji dostosowywania. Korzystając z tego wzorca, możesz dostosować styl dowolnego obiektu Polyline za pomocą wymienionych wcześniej parametrów dostosowania linii łamanej.

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

// 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ść Polyline obiektów

Domyślnie widoczne są wszystkie obiekty Polyline. Aby ustawić obiekt Polyline jako niewidoczny, ustaw jego właściwość visible:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Wyświetl InfoWindow w przypadku pojazdu lub znacznika lokalizacji

Aby wyświetlić dodatkowe informacje o pojeździe lub znaczniku lokalizacji, użyj symbolu InfoWindow.

Poniższy przykład pokazuje, jak utworzyć obiekt InfoWindow i dołączyć go do znacznika pojazdu.

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

// 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 zatrzymać 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 udostępnianego przejazdu.

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

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

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

Załóżmy np., ż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 sekwencji ścieżki JavaScript, która obejmuje śledzenie floty:

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

Poniższy przykład pokazuje zmiany, które mają zostać wprowadzone:

<!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 prowadzisz pojazd dostawczy o określonym identyfikatorze w pobliżu Uluru, zostanie on wyświetlony na mapie.