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

JavaScript SDK umożliwia wizualizację lokalizacji pojazdów i interesujących Cię lokalizacji śledzonych przez Fleet Engine. Ta biblioteka zawiera komponent mapy JavaScript, który jest zwykłym zamiennikiem standardowej encji google.maps.Map i komponentów danych umożliwiających połączenie z Fleet Engine. Za pomocą pakietu SDK JavaScript możesz zapewnić w swojej aplikacji internetowej spersonalizowaną podróż i animowaną podróż oraz możliwość realizacji zamówień.

Komponenty

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

Widok mapy postępu podróży i zamówień

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

Dostawca lokalizacji podróży

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

Możesz korzystać z usług dostawcy lokalizacji podróży, aby śledzić:

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

Obiekty ze śledzoną lokalizacją

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

Lokalizacja punktu początkowego

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

Lokalizacja docelowa

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

Lokalizacja punktu pośredniego

Lokalizacja punktu pośredniego to dowolna lokalizacja na trasie śledzonej podróży. Na przykład każdy przystanek na trasie autobusowej jest lokalizacją w punkcie pośrednim.

Lokalizacja pojazdu

Lokalizacja pojazdu to śledzona lokalizacja pojazdu. Opcjonalnie może obejmować trasę przejazdu pojazdem.

Pobieranie 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 ramach swojej aplikacji internetowej, używając pakietu SDK JavaScript, aby uwierzytelnić dostęp do danych o lokalizacji.

Opcje stylu

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

Kontrolowanie widoczności śledzonych lokalizacji

W tej sekcji opisano reguły widoczności obiektów lokalizacji śledzonych na mapie w przypadku dostawców wstępnie zdefiniowanych lokalizacji Fleet Engine. Dostawcy niestandardowych lub pochodnych lokalizacji mogą zmieniać reguły widoczności.

Pojazdy

Pojazd do wspólnych przejazdów jest widoczny od momentu przypisania go do podróży do chwili wyjazdu. Jeśli podróż zostanie odwołana, pojazd będzie widoczny dłużej.

Wszystkie inne znaczniki lokalizacji

Wszystkie inne znaczniki lokalizacji wylotu, celu podróży i punktów na trasie są zawsze widoczne na mapie. Na przykład miejsce zbiórki wspólnych przejazdów lub miejsce dostawy są zawsze wyświetlane na mapie, niezależnie od stanu podróży czy dostawy.

Pierwsze kroki z pakietem JavaScript SDK

Zanim użyjesz pakietu JavaScript SDK, upewnij się, że znasz Fleet Engine i wiesz, jak uzyskać klucz interfejsu API.

Aby śledzić taką trasę, najpierw utwórz roszczenie dotyczące identyfikatora podróży.

Tworzenie roszczenia dotyczącego identyfikatora podróży

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

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

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

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

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

JavaScript Consumer SDK wysyła żądanie tokena za pomocą modułu pobierania tokenów uwierzytelniania, gdy jest spełniony dowolny z tych warunków:

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

W przeciwnym razie pakiet SDK używa poprzednio wydanego, wciąż ważnego tokena i nie wywołuje modułu pobierania.

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

JavaScript

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

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.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

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

  • Punkt końcowy musi zwracać czas wygaśnięcia tokena. W przykładzie powyżej jest to data.ExpiresInSeconds.
  • Moduł pobierania tokenów uwierzytelniania musi przekazać do biblioteki czas wygaśnięcia (w sekundach, od czasu pobrania), jak pokazano w przykładzie.
  • Adres URL SERVER_TOKEN_URL zależy od implementacji dostawcy. Oto adresy URL przykładowego dostawcy:
    • https://SERVER_URL/token/driver/VEHICLEID
    • https://SERVER_URL/token/consumer/TRIPID

Wczytywanie mapy z HTML

W przykładzie poniżej pokazujemy, jak wczytać pakiet JavaScript SDK z podanego adresu URL. Parametr callback wykonuje funkcję initMap po wczytaniu interfejsu API. Atrybut defer pozwala przeglądarce kontynuować renderowanie pozostałej części strony podczas wczytywania interfejsu API.

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

Po podróży

W tej sekcji pokazujemy, jak korzystać z pakietu JavaScript SDK do śledzenia wspólnych przejazdów lub dostawy. Pamiętaj, aby przed uruchomieniem kodu załadować bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu.

Utwórz instancję dostawcy usług lokalizacji dla podróży

JavaScript SDK wstępnie definiuje dostawcę lokalizacji dla interfejsu Fleet Engine Ridesharing API. Utwórz instancję, korzystając z identyfikatora projektu i odwołania do fabryki tokenów.

JavaScript

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

TypeScript

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 załadowaniu pakietu SDK JavaScript zainicjuj widok mapy i dodaj go do strony HTML. Strona powinna zawierać element <div> z widokiem mapy. W poniższym przykładzie element <div> ma nazwę map_canvas.

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

JavaScript

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

TypeScript

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

Nasłuchuj zdarzeń zmian

Możesz pobrać metadane o podróży z obiektu zadania, korzystając z dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia na miejsce i pozostałą odległość przed odebraniem lub dostarczeniem. Zmiany metadanych wywołują zdarzenie update. Z przykładu poniżej dowiesz się, jak nasłuchiwać zdarzeń zmian.

JavaScript

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

TypeScript

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, które występują asynchronicznie podczas żądania informacji o podróży, wywołują zdarzenia błędów. Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń w celu obsługi błędów.

JavaScript

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

TypeScript

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

Uwaga: aby obsługiwać nieprzewidziane błędy, pamiętaj o opakowaniu wywołań biblioteki w bloki try...catch.

Zakończ śledzenie

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

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

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

Dostosowywanie wyglądu i stylu mapy podstawowej

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

Korzystanie ze stylów map działających w chmurze

Definiowanie stylów map w Google Cloud pozwala tworzyć i edytować style map dla dowolnych aplikacji korzystających z Map Google, korzystając z konsoli Google Cloud, bez konieczności wprowadzania zmian w kodzie. Style mapy są zapisywane jako identyfikatory map w projekcie Cloud. Aby zastosować styl do mapy JavaScript SDK, podczas tworzenia zasobu JourneySharingMapView określ mapId i dowolne inne 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.

JavaScript

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

TypeScript

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żywaj stylu mapy opartego na kodzie

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

JavaScript

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

TypeScript

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

Dostosowywanie znaczników

Za pomocą pakietu JavaScript SDK możesz dostosować wygląd i sposób działania znaczników dodawanych do mapy. Aby to zrobić, określ dostosowania znaczników, które pakiet JavaScript SDK stosuje przed dodaniem znaczników do mapy i po każdej aktualizacji znaczników.

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

Bardziej zaawansowaną opcją jest określenie funkcji dostosowywania. Funkcje dostosowywania pozwalają na określanie stylu znaczników na podstawie danych oraz dodawanie do znaczników interaktywnych elementów, np. obsługi kliknięć. W szczególności proces podróży i zamówienia przekazuje do funkcji dostosowywania dane dotyczące typu obiektu reprezentowanego przez znacznik: pojazdu, miejsca wylotu, punktu pośredniego lub miejsca docelowego. Dzięki temu styl znacznika 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 podróży przez pojazd. Możesz nawet złączać dane ze źródeł spoza Fleet Engine i określać styl znacznika na podstawie tych informacji.

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

Zmień styl znaczników za pomocą atrybutu MarkerOptions

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

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Zmienianie stylu znaczników za pomocą funkcji dostosowywania

Przykład poniżej pokazuje, jak skonfigurować styl znacznika pojazdu. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego znacznika za pomocą wymienionych wcześniej parametrów dostosowywania znaczników.

JavaScript

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

TypeScript

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

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

Poniższy przykład pokazuje, jak dodać obsługę kliknięć do znacznika pojazdu. Postępuj zgodnie z tym wzorcem, aby dodać obsługę kliknięć do dowolnego znacznika za pomocą dowolnego z wymienionych wcześniej parametrów dostosowania znaczników.

JavaScript

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

TypeScript

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

Dostosowywanie linii łamanej

Za pomocą pakietu JavaScript SDK możesz również dostosować wygląd i styl trasy podróży 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 stylizować obiekty Polyline, określając niestandardowe ustawienia linii łamanej. Następnie biblioteka stosuje te dostosowania w 2 sytuacjach: przed dodaniem obiektów do mapy i gdy dane używane przez te obiekty ulegną zmianie.

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

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

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

Zmień styl Polyline obiektów za pomocą PolylineOptions

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

JavaScript

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

TypeScript

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

Zmień styl Polyline obiektu za pomocą funkcji dostosowywania

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

JavaScript

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

TypeScript

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

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Renderuj obiekty Polyline z uwzględnieniem natężenia ruchu

Fleet Engine zwraca dane o prędkości ruchu dla aktywnych i pozostałych ścieżek dla odpowiedniego pojazdu. Na podstawie tych informacji możesz dostosować styl obiektów Polyline do prędkości ruchu:

JavaScript

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

TypeScript

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

Aby wyświetlać InfoWindow obok pojazdu lub znacznika lokalizacji

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

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

JavaScript

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

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

TypeScript

// 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 wyłączyć automatyczne dopasowywanie widocznego obszaru do pojazdu i przewidywanej trasy na mapie. W tym celu wyłącz automatyczne dopasowanie. Poniższy przykład pokazuje, jak wyłączyć automatyczne dopasowanie podczas konfigurowania widoku mapy podróży i postępu realizacji zamówienia.

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

Za pomocą pakietu JavaScript SDK możesz zastąpić istniejącą mapę, która zawiera znaczniki i inne dostosowania, bez utraty tych dostosowań.

Załóżmy np., że masz stronę internetową ze standardowym elementem google.maps.Map, na którym jest wyświetlany znacznik:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, 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. 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
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 podróżujesz o określonym identyfikatorze w pobliżu Uluru, zostanie ona wyrenderowana na mapie.