Monitorowanie floty przy użyciu biblioteki śledzenia JavaScript

Biblioteka śledzenia floty w języku JavaScript umożliwia wizualizację lokalizacji pojazdów w swoich flotach niemal w czasie rzeczywistym. Biblioteka korzysta z Deliveryies API (w języku angielskim) aby umożliwić wizualizację pojazdów i zadań. Podobne do Biblioteka śledzenia przesyłek JavaScript, zawiera komponent mapy JavaScript, który jest zwykłym zamiennikiem. dla standardowej encji google.maps.Map i komponentów danych do połączenia we Fleet Engine.

Komponenty

Biblioteka śledzenia floty w języku JavaScript udostępnia komponenty do wizualizacji pojazdów dostawczych i przystanków, a także nieprzetworzone pliki danych z szacowanym czasem dotarcia na miejsce odległość od dostawy.

Widok mapy śledzenia floty

Komponent widoku mapy śledzenia floty wizualizuje lokalizację pojazdów i zadań. Jeśli trasa pojazdu jest znana, komponent widoku mapy animuje pojazd w miarę jego przemieszczania się wzdłuż przewidywanej trasy.

Dostawcy lokalizacji

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

Dostawca lokalizacji pojazdu dostawy

Dostawca lokalizacji pojazdu dostawcze wyświetla jeden informacje o lokalizacji. Zawiera informacje o lokalizacji pojazdu oraz zadania wykonane przez dostawcę.

Dostawca lokalizacji floty urządzeń

Dostawca lokalizacji floty pojazdów wyświetla lokalizacja i informacjami o nich. 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 objętych śledzeniem lokalizacji na mapie dla dostawcy wstępnie zdefiniowanej lokalizacji Fleet Engine. Niestandardowe lub pochodne dostawcy usług lokalizacyjnych mogą zmienić reguły widoczności.

Pojazdy dostawcze

Pojazd dostawczy jest widoczny, gdy tylko zostanie utworzony 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 w przypadku ukończonych zadań są wyświetlane w innym stylu niż styl pojazdu planowane przystanki.

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

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

Przed użyciem biblioteki śledzenia flotowej w JavaScripcie sprawdź, czy znajomość Fleet Engine oraz uzyskanie klucza 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: utworzyć token internetowy JSON (JWT) z identyfikatorem zadania i deklaracją identyfikatora pojazdu dostawy.

Aby utworzyć ładunek JWT, dodaj dodatkową deklarację w sekcji autoryzacji za pomocą kluczy taskid i deliveryvehicleid, a potem ustaw wartość. każdego klucza na *. Token należy utworzyć za pomocą Fleet Engine Superużytkownik usługi – rola Cloud IAM. Pamiętaj, że to zapewnia szeroki dostęp na tworzenie, odczytywanie i modyfikowanie encji Fleet Engine. Należy je udostępniać tylko z zaufanymi użytkownikami.

Przykład poniżej pokazuje, jak utworzyć token do śledzenia według pojazdu i zadanie:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "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, który będzie pobierać wygenerowany token z odpowiednimi deklaracjimi na serwerach w ramach usługi certyfikat konta dla swojego projektu. Ważne jest, aby generować tylko tokeny na swoich serwerach i nigdy nie udostępniaj swoich certyfikatów żadnym klientom. W przeciwnym razie zagraża bezpieczeństwu systemu.

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

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

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

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

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

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

JavaScript

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

TypeScript

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

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

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

Wczytywanie mapy z HTML

Ten przykład pokazuje, jak wczytać udostępnianie ścieżki JavaScript z określonego adresu URL. Parametr callback wykonuje polecenie initMap po wczytaniu interfejsu API. Atrybut defer pozwala przeglądarce kontynuuj renderowanie reszty strony podczas wczytywania interfejsu API.

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

Śledź pojazd dostawczy

Ta sekcja pokazuje, jak korzystać z biblioteki śledzenia flot w JavaScripcie jechać za pojazdem dostawczym. Upewnij się, że: wczytaj bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu przed uruchomieniem kodu.

Utwórz instancję dostawcy lokalizacji pojazdu

Biblioteka śledzenia flot w JavaScripcie wstępnie definiuje dostawcę lokalizacji dla interfejsu Fleet Engine Deliveries API. Użyj identyfikatora projektu odwołanie do fabryki tokenów do utworzenia jej instancji.

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 udostępniania czynności JavaScript zainicjuj ją. widok mapy i dodać go do strony HTML. Strona powinna zawierać element <div> zawierający widok mapy. Element <div> w poniższym przykładzie nazwano 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

Z obiektu deliveryVehicle możesz pobrać metainformacje o zadaniu przy użyciu dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia na miejsce i pozostały dystans przed następnym odbiorem lub oddaniem pojazdu. Zmiany do informacji o metatagach wywołują zdarzenie update. Przykład poniżej pokazuje, jak nasłuchiwać tych 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 powstają asynchronicznie podczas wysyłania żądania informacji o dostarczeniu informacji o pojeździe tych zdarzeń. Przykład poniżej pokazuje, jak nasłuchiwać tych zdarzeń aby naprawić błędy.

JavaScript

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

TypeScript

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

Zakończ śledzenie

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

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

Z tej sekcji dowiesz się, jak korzystać z biblioteki udostępniania czynności JavaScript aby wyświetlić flotę dostawców. Upewnij się, że: wczytaj bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu przed uruchomieniem kodu.

Utwórz instancję dostawcy lokalizacji floty transportowej

Biblioteka śledzenia flot w JavaScripcie wstępnie definiuje dostawcę lokalizacji, który pobiera wiele pojazdów z FleetEngine Deliveries API. Użyj identyfikatora projektu oraz odwołania do modułu pobierania tokenów umożliwiającego utworzenie jego instancji.

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 mapę. Ten filtr jest przekazywany bezpośrednio do Fleet Engine. Zobacz ListDeliveryVehiclesRequest.filter aby poznać obsługiwane formaty.

locationRestriction ogranicza obszar, na którym pojazdy są wyświetlane na mapie. Wskazuje też, czy śledzenie lokalizacji jest aktywne. Śledzenie lokalizacji nie rozpocznie się bez ustawienia tej opcji.

Po utworzeniu dostawcy lokalizacji zainicjować widok mapy.

Ustawianie ograniczeń lokalizacji w widoku mapy

Granice locationRestriction można skonfigurować tak, aby pasowały do obecnego obszaru widoczne 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

Metadane dotyczące floty możesz pobrać z deliveryVehicles za pomocą dostawcy lokalizacji. Metadane obejmują informacje o pojeździe właściwości takie jak stan nawigacji, pozostała odległość oraz atrybuty niestandardowe; zobacz dokumentacja referencyjna . Zmiana metainformacji aktywuje zdarzenie update. Z przykładu poniżej dowiesz się, jak wychwytywać 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 występują asynchronicznie podczas żądania informacji o flocie dostarczania zdarzeń błędów wywołania. Przykłady wykrywania, jak nasłuchiwać tych zdarzeń, znajdziesz: kliknij Listen for errors (Wykryj błędy).

Zakończ śledzenie

Aby uniemożliwić dostawcy lokalizacji śledzenie floty dostarczającej, ustaw granice dostawcy lokalizacji na 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 pokazać trasę i nadchodzące zadania dla określonej floty pojazdem dostawczym. Aby to zrobić, utwórz instancję zarówno lokalizacji floty dostarczania, Dostawcy i Dostawcę lokalizacji pojazdu dostawy. Dodaj ich oba te elementy do widok 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ć pojazdy dostawcze mapę. Użyj opcji dostosowania znacznika, aby włączyć lokalizację pojazdu dostawy w celu śledzenia pojazdu dostawy 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 renderowaniu dwa znaczniki 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 komponentu map: styl mapy za pomocą narzędzi działających w chmurze lub przez ustawienie opcji bezpośrednio w kodzie.

Używaj stylu mapy w chmurze

Definiowanie stylów map w Google Cloud pozwala tworzyć i edytować style mapy dla dowolnej aplikacji korzystającej z Map Google z konsoli Google Cloud bez konieczności wprowadzania zmian w kodzie. Style mapy są zapisywane jako identyfikatory map w projekcie Cloud. Do zastosuj styl do mapy śledzenia flot w JavaScripcie, określ mapId podczas tworzenia elementu JourneySharingMapView. Pola mapId nie można zmienić lub dodano po utworzeniu instancji JourneySharingMapView. Poniżej przykład pokazuje, jak włączyć wcześniej utworzony styl mapy z użyciem atrybutu identyfikator 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 dostosowywania stylu mapy jest ustawienie mapOptions, gdy utwórz JourneySharingMapView.

JavaScript

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

TypeScript

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

Dostosowywanie znaczników

Za pomocą biblioteki śledzenia flot w JavaScripcie możesz dostosować wygląd i styl znaczników dodanych do mapy. W tym celu należy określić ustawienia znaczników, które biblioteka śledzenia floty stosuje przed dodaniem znaczników do mapy. i po każdej aktualizacji znacznika.

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

Bardziej zaawansowaną opcją jest określenie funkcji dostosowywania. Personalizacja pozwalają na określanie stylu znaczników na podstawie danych oraz dodawanie interaktywność ze znacznikami, na przykład obsługę kliknięć. Konkretnie chodzi tu o śledzenie floty przekazuje do funkcji dostosowywania dane dotyczące typu obiektu, który oznacza znacznik reprezentuje: pojazd, zatrzymanie lub zadanie. Pozwoli to na zmianę stylu znacznika na podstawie bieżącego stanu samego elementu znacznika; Na przykład liczba o pozostałych przystankach lub typie zadania. Możesz nawet złączać je z danymi ze źródeł. poza Fleet Engine i określić na tej podstawie styl znacznika.

Ponadto możesz za pomocą funkcji dostosowywania filtrować widoczność znaczników. W tym celu wywołaj setVisible(false) na znaczniku.

Jednak ze względu na wydajność zalecamy filtrowanie według modelu natywnego u dostawcy lokalizacji, takiego jak FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter Jeśli jednak potrzebna jest dodatkowa funkcja filtrowania, można zastosować za pomocą funkcji dostosowywania.

Biblioteka śledzenia floty udostępnia te parametry dostosowania:

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

Zmień styl znaczników za pomocą atrybutu MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Zmienianie stylu znaczników za pomocą funkcji dostosowywania

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.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 ze znaczników wymienionych powyżej parametrów dostosowania.

JavaScript

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

TypeScript

deliveryVehicleMarkerCustomization =
  (params: 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ć dowolne znaczniki z wykorzystaniem dowolnych dostosowań 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

Korzystając z biblioteki śledzenia floty w języku JavaScript, możesz też dostosować wygląd trasy danego pojazdu na mapie. Biblioteka tworzy google.maps.Polyline dla każdej pary współrzędnych pojazdu path. Możesz stylizować obiekty Polyline, określając niestandardowe ustawienia linii łamanej. Google stosuje te dostosowania w dwóch sytuacjach: przed dodaniem funkcji obiekty na mapie oraz gdy dane używane na potrzeby obiektów uległy zmianie.

Podobnie jak w przypadku dostosowywania znaczników, możesz tu określić zestaw PolylineOptions zostanie zastosowany do wszystkich pasujących obiektów Polyline, gdy są utworzonych lub zaktualizowanych.

Możesz również określić funkcję dostosowywania. Funkcje dostosowywania pozwalają na dostosowywanie stylu obiektów na podstawie danych wysłanych przez Fleet Engine. Ta funkcja może zmieniać styl każdego obiektu w zależności od bieżącego pojazdu stan; na przykład zabarwienie obiektu Polyline ciemniejszym odcieniem jest grubsza, gdy pojazd porusza się wolniej. Możesz nawet dołączyć do przeciwko z źródeł spoza Fleet Engine i na tej podstawie określić styl obiektu Polyline i informacjami o nich.

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

• takenPolylineCustomization w przypadku już pokonanej ścieżki;
• activePolylineCustomization dla aktywnie podróżującej ścieżki,
• remainingPolylineCustomization dla nieprzebytej ścieżki.

Zmień styl Polyline obiektów za pomocą PolylineOptions

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

JavaScript

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

TypeScript

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

Zmień styl Polyline obiektu za pomocą funkcji dostosowywania

Poniższy przykład pokazuje, jak skonfigurować styl aktywnej linii łamanej za pomocą funkcji dostosowywania. Postępuj zgodnie z tym wzorcem, aby dostosować określanie stylu dowolnego obiektu Polyline za pomocą dostosowania linii łamanej wymienionych wcześniej parametrów.

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. Tworzenie obiektu Polyline niewidoczny, ustaw jego visible usługa:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Aby wyświetlać InfoWindow obok pojazdu lub znacznika lokalizacji

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

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

JavaScript

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

// (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 mapy do pojazdu. i przewidywanej trasy, wyłączając automatyczne dopasowanie. Przykład poniżej pokazuje, jak wyłączyć automatyczne dopasowanie podczas konfigurowania udostępniania podróży widoku mapy.

JavaScript

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

TypeScript

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 lub inne dostosowania bez utraty tych ustawień.

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

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

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

Aby dodać bibliotekę do udostępniania czynności JavaScript, 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 podanym identyfikatorze w pobliżu Uluru, teraz zostanie wyświetlony na mapie.