Pakiet SDK dla konsumentów dotyczący JavaScriptu – pierwsze kroki

Pakiet JavaScript SDK umożliwia wizualizację lokalizacji pojazdów i wyszukiwanych lokalizacji śledzonych we Fleet Engine. Biblioteka zawiera komponent mapy JavaScript, który zastępuje standardową encję google.maps.Map i komponenty danych w celu połączenia z Fleet Engine. Pakiet JavaScript SDK umożliwia wyświetlanie z poziomu aplikacji internetowej dostosowywanych, animowanych przejazdów i przebiegu zamówień.

Komponenty

Pakiet SDK JavaScript udostępnia komponenty do wizualizacji pojazdów i punktów na trasie, a także nieprzetworzone pliki danych o szacowanym czasie dotarcia kierowcy lub pozostałej odległości do przejechania.

Widok mapy postępu podróży i zamówienia

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

Dostawca informacji o miejscu podróży

Pakiet JavaScript SDK zawiera dostawcę informacji o lokalizacji wycieczki, który przekazuje informacje o lokalizacji śledzonych obiektów do mapy postępu podróży i realizacji zamówień.

Korzystając z usług dostawcy informacji o lokalizacji podróży, możesz monitorować:

• Miejsce odbioru lub miejsca docelowego podróży.
• Lokalizacja i trasa pojazdu przypisanego do podróży.

Śledzone obiekty lokalizacji

Dostawca lokalizacji śledzi lokalizację obiektów, takich jak punkty na trasie czy pojazdy.

Lokalizacja początkowa

Lokalizacja początkowa to miejsce, w którym zaczyna się podróż. Zaznacza miejsce odbioru.

Lokalizacja docelowa

Lokalizacja docelowa to miejsce, w którym kończy się podróż. Wskazuje miejsce zwrotu.

Lokalizacja punktu pośredniego

Lokalizacja punktu pośredniego to dowolne miejsce na trasie śledzonej podróży. Na przykład każdy przystanek na trasie autobusu jest lokalizacją punktu pośredniego.

Lokalizacja pojazdu

Lokalizacja pojazdu to jego śledzona lokalizacja. Może ona opcjonalnie obejmować trasę dla pojazdu.

Narzędzie do pobierania tokenów uwierzytelniania

Aby kontrolować dostęp do danych o lokalizacji przechowywanych we Fleet Engine, musisz wdrożyć na swoim serwerze usługę generowania tokenów sieciowych JSON (JWT) dla Fleet Engine. Następnie zaimplementuj moduł pobierania tokenów uwierzytelniania w swojej aplikacji internetowej, korzystając z pakietu SDK JavaScript do uwierzytelniania dostępu do danych o lokalizacji.

Opcje stylu

Style znaczników i linii łamanych określają wygląd i styl śledzonych obiektów lokalizacji na mapie. Za pomocą opcji stylu niestandardowego możesz zmienić styl domyślny, by pasował do stylu Twojej aplikacji internetowej.

Kontrolowanie widoczności śledzonych lokalizacji

W tej sekcji opisujemy reguły widoczności dla śledzonych obiektów lokalizacji na mapie dla dostawców wstępnie zdefiniowanych lokalizacji Fleet Engine. Niestandardowi lub wyznaczeni dostawcy lokalizacji mogą zmieniać reguły widoczności.

Pojazdy

Pojazd do wspólnych przejazdów jest widoczny od momentu przypisania go do przejazdu do momentu wylotu. Jeśli podróż zostanie anulowana, pojazd będzie dłużej widoczny.

Wszystkie inne znaczniki lokalizacji

Pozostałe znaczniki lokalizacji miejsca wylotu, miejsca docelowego i punktu na trasie są zawsze wyświetlane na mapie. Na przykład miejsce docelowe przesyłki we własnym zakresie lub miejsce dostawy przesyłki jest zawsze wyświetlane na mapie niezależnie od stanu podróży lub dostawy.

Pierwsze kroki z pakietem JavaScript SDK

Przed użyciem pakietu JavaScript SDK zapoznaj się z mechanizmem Fleet Engine i dowiedz się, jak uzyskać klucz API.

Aby śledzić podróż wspólną, najpierw utwórz roszczenie dotyczące identyfikatora podróży.

Tworzenie roszczenia dotyczącego identyfikatora podróży

Aby śledzić podróż, korzystając z dostawcy lokalizacji podróży, utwórz token sieciowy JSON (JWT) z deklaracjami identyfikatora podróży.

Aby utworzyć ładunek JWT, dodaj w sekcji autoryzacji dodatkowe twierdzenie z kluczem tripid i ustaw jego wartość na identyfikator podróży.

Z przykładu poniżej dowiesz się, jak utworzyć token do śledzenia według identyfikatora podróży:

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

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.

Pakiet JavaScript Consumer SDK wysyła żądanie 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 pakiet SDK 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:

async 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.jwt,
    expiresInSeconds: data.expirationTimestamp - 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 Twojego dostawcy. Oto adresy URL przykładowego dostawcy:
  • https://SERVER_URL/token/driver/VEHICLEID
  • https://SERVER_URL/token/consumer/TRIPID

Wczytywanie mapy z HTML

Poniższy przykład pokazuje, jak wczytać pakiet JavaScript SDK 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>

Obserwowanie podróży

W tej sekcji dowiesz się, jak korzystać z pakietu SDK JavaScript, aby śledzić wspólne przejazdy lub dostawę. Pamiętaj, aby przed uruchomieniem kodu załadować bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu.

Tworzenie instancji dostawcy lokalizacji podróży

Pakiet JavaScript SDK wstępnie definiuje dostawcę lokalizacji dla interfejsu Fleet Engine Ridesharing API. Aby utworzyć instancję, użyj identyfikatora projektu i odniesienia do fabryki tokenów.

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

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

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

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

Inicjowanie widoku mapy

Po wczytaniu pakietu SDK 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.

Aby uniknąć wyścigów, ustaw identyfikator podróży dla dostawcy lokalizacji w wywołaniu zwrotnym, które jest wywoływane po zainicjowaniu mapy.

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

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

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

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

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-id';

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

Wykrywaj zmiany

Metainformacje o podróży możesz pobrać z obiektu zadania, korzystając z dostawcy lokalizacji. Metainformacje zawierają szacowany czas dotarcia i pozostałą odległość przed rozpoczęciem podróży lub wysyłką. Zmiany w metadanych wywołują zdarzenie update. Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń zmiany.

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

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

Obsługa błędów

Błędy powstające asynchronicznie w wyniku żądania informacji o podróży 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 contains the error that triggered the 
  // event
  console.error(e.error);
});

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

Uwaga: wywołania biblioteki pakuj w bloki try...catch, aby obsłużyć nieprzewidziane błędy.

Zakończ śledzenie

Aby uniemożliwić dostawcy lokalizacji śledzenie podróży, usuń z niego identyfikator podróży.

locationProvider.tripId = '';

locationProvider.tripId = '';

Usuń dostawcę lokalizacji z widoku mapy

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Dostosowywanie wyglądu i stylu 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żywanie stylów mapy w 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 z pakietem JavaScript SDK, podczas tworzenia obiektu JourneySharingMapView określ mapId i dowolne inne elementy mapOptions. 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'
  }
  // and any other styling options.
});

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

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

Pakiet SDK JavaScript pozwala dostosować wygląd i działanie znaczników dodawanych do mapy. W tym celu należy określić dostosowania znaczników, które pakiet JavaScript SDK stosuje przed dodaniem znaczników do mapy i przy każdej ich aktualizacji.

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ęć. Postępy w podróży i zamówieniach przekazują do funkcji dostosowywania dane o typie obiektu reprezentowanego przez znacznik: pojazd, punkt początkowy, punkt pośredni lub cel podróży. Dzięki temu styl znaczników może się zmieniać w zależności od bieżącego stanu samego elementu znacznika, np. liczby punktów pośrednich pozostałych do zakończenia przejazdu. Możesz nawet złączać z danymi ze źródeł spoza Fleet Engine i na podstawie tych informacji dostosować styl znacznika.

Pakiet JavaScript SDK udostępnia w języku FleetEngineTripLocationProviderOptions te parametry dostosowania:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

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 opcji.

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Zmiana stylu znaczników za pomocą funkcji dostosowywania

Poniższy przykład pokazuje, jak skonfigurować styl oznakowania pojazdu. Korzystając z tego wzoru, możesz dostosować styl dowolnego znacznika za pomocą wymienionych wcześniej parametrów dostosowania znacznika.

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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 wcześniej parametrów dostosowania znacznika.

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

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

Dostosuj linię łamaną

Za pomocą pakietu JavaScript SDK możesz też dostosować wygląd i styl trasy na mapie. 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. Ta funkcja może zmieniać styl każdego obiektu w zależności od jego aktualnego stanu, np. kolorować obiekt Polyline bardziej odcień lub pogrubić go, gdy pojazd jedzie wolniej. Możesz nawet złączać się ze źródłami spoza Fleet Engine i na tej podstawie określać styl obiektu Polyline.

Możesz określić dostosowania za pomocą parametrów w FleetEngineTripLocationProviderOptions. 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 aktywnego obiektu Polyline. Korzystając z tego wzorca, możesz dostosować styl dowolnego obiektu Polyline za pomocą dowolnych parametrów dostosowania linii łamanej wymienionych wcześniej.

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    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: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    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};

Renderuj obiekty Polyline zorientowane na ruch

Fleet Engine zwraca dane o prędkości ruchu na aktywnych i pozostałych ścieżkach śledzonego pojazdu. Możesz wykorzystać te informacje, by dostosować styl obiektów Polyline do prędkości ruchu:

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

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ć dokument InfoWindow i dołączyć go do znacznika pojazdu:

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

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Wyłącz automatyczne dopasowanie

Możesz 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 postępu podróży i zamówienia.

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

Za pomocą pakietu SDK JavaScript możesz zastąpić istniejącą mapę, która zawiera znaczniki lub 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, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, 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ć pakiet SDK JavaScript:

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

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

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

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, 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 SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Jeśli prowadzisz podróż z określonym identyfikatorem w pobliżu Uluru, zostanie ona wyświetlona na mapie.