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

Pakiet SDK JavaScript umożliwia wizualizację lokalizacji pojazdów i interesujących lokalizacji śledzonych przez Fleet Engine. Biblioteka zawiera komponent mapy JavaScript, który jest zwykłym zamiennikiem; dla standardowego elementu google.maps.Map i komponentów danych do połączenia we Fleet Engine. Za pomocą pakietu SDK JavaScript możesz udostępnić w swojej aplikacji internetowej spersonalizowaną, animowaną podróż i postępy w realizacji zamówień.

Komponenty

Pakiet SDK JavaScript udostępnia komponenty do wizualizacji. pojazdów i punktów pośrednich, a także nieprzetworzone pliki danych z szacowanym czasem dotarcia na miejsce albo pozostałą odległość 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 jest animowany. jaki pojazd porusza się po prognozowanej ścieżce.

Dostawca lokalizacji podróży

Pakiet JavaScript SDK zawiera lokalizację podróży który dostarcza informacje o lokalizacji śledzonych obiektów do mapę trasy podróży i postępów w realizacji 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óż. Zaznacza wybierz 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: uwzględnij trasę pojazdu.

Pobieranie tokenów uwierzytelniania

Aby kontrolować dostęp do danych o lokalizacji przechowywanych we Fleet Engine, musisz wdrożyć usługę generowania tokenów sieciowych JSON (JWT) dla Fleet Engine na swoim serwerze. Następnie zaimplementuj moduł pobierania tokenów uwierzytelniania. aplikacji internetowej przy użyciu 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 śledzonych obiektów lokalizacji na mapie. Za pomocą niestandardowe opcje stylu pozwalające zmienić styl domyślny w celu dostosowania go do stylu Twojej aplikacji internetowej.

Kontrolowanie widoczności śledzonych lokalizacji

W tej sekcji opisano reguły widoczności obiektów objętych śledzeniem lokalizacji na mapie dla dostawców wstępnie zdefiniowanych lokalizacji Fleet Engine. Niestandardowe lub pochodne dostawcy usług lokalizacyjnych mogą zmienić reguły widoczności.

Pojazdy

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

Wszystkie inne znaczniki lokalizacji

Wszystkie inne znaczniki lokalizacji początku, celu i punktów na trasie są jest zawsze widoczna na mapie. Na przykład miejsce zbiórki wspólnych przejazdów lub adres dostawy jest zawsze wyświetlany na mapie, od stanu podróży lub dostawy.

Pierwsze kroki z pakietem JavaScript SDK

Zanim użyjesz pakietu SDK JavaScript, upewnij się, znasz Fleet Engine uzyskanie klucza 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: utworzyć token internetowy JSON (JWT) z deklaracją identyfikatora podróży.

Aby utworzyć ładunek JWT, dodaj dodatkową deklarację w sekcji autoryzacji z kluczem tripid, a jego wartością jest identyfikator wycieczki.

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

JavaScript Consumer SDK żąda tokena przez token uwierzytelniania modułu pobierania, 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 pakiet SDK używa wydanego wcześniej, wciąż ważnego tokena i nie możesz wywołać moduł 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(),
  };
}

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

Z przykładu poniżej dowiesz się, jak wczytać pakiet SDK 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>

Po podróży

Z tej sekcji dowiesz się, jak korzystać z pakietu SDK JavaScript na wspólne przejazdy lub dostawę. Upewnij się, że: wczytaj bibliotekę z funkcji wywołania zwrotnego określonej w tagu skryptu przed uruchomieniem kodu.

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

JavaScript SDK wstępnie definiuje dostawcę lokalizacji dla interfejsu Fleet Engine Ridesharing API. Użyj identyfikatora projektu odwołanie do fabryki tokenów do utworzenia jej instancji.

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 wczytaniu pakietu SDK JavaScript zainicjuj widok mapy i dodać go do strony HTML. Strona powinna zawierać element &lt;div&gt; zawierający widok mapy. Element &lt;div&gt; w poniższym przykładzie nazwano map_canvas.

Aby uniknąć wyścigu, ustaw identyfikator podróży dla dostawcy lokalizacji w wywołaniu zwrotnym wywoływanym 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

Z obiektu zadania możesz pobrać metainformacje o podróży przy użyciu dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia na miejsce i pozostały dystans do odbioru lub dostawy. Zmiany metadanych wywołuje 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 powstają asynchronicznie podczas żądania aktywacji informacji o podróży tych zdarzeń. Przykład poniżej pokazuje, jak nasłuchiwać tych zdarzeń aby naprawić błędy.

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: pamiętaj, aby wywołania biblioteki umieścić w try...catch blokach. aby radzić sobie z nieoczekiwanymi błędami.

Zakończ śledzenie

Aby uniemożliwić dostawcy lokalizacji śledzenie podróży, usuń identyfikator podróży z: z dostawcą 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 komponentu map: styl mapy za pomocą narzędzi działających w chmurze lub przez ustawienie opcji 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 mapy dla dowolnej aplikacji korzystającej z Map Google za pomocą 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 JavaScript SDK, określ mapId i wszystkie inne mapOptions podczas tworzenia 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'
  }
  // 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 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ą pakietu SDK JavaScript możesz dostosować wygląd i sposób działania znaczników dodawanych do mapę. W tym celu należy określić dostosowania znaczników, JavaScript SDK jest następnie stosowany przed dodaniem znaczników do mapy i przy każdym aktualizację 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: Podróż i Zamówienie Postęp przekazuje do funkcji dostosowywania dane dotyczące typu obiektu znacznik reprezentuje pojazd, miejsce wylotu, punkt pośredni lub miejsce docelowe. Pozwoli to na styl znacznika zmienia się w zależności od bieżącego stanu elementu znacznika jej samej; na przykład liczba punktów pośrednich pozostałych do zakończenia przejazdu pojazdu w podróż. Można nawet łączyć z danymi ze źródeł spoza Fleet Engine dostosować styl znacznika na podstawie tych informacji.

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

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 dowolnych z 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. Obserwuj aby dostosować styl dowolnego znacznika za pomocą dowolnego ze znaczników wymienionych wcześniej parametrów dostosowania.

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

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 podróży trasę dojazdu 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 stanu pojazdu; na przykład ciemniejsze odcienie obiektu Polyline lub tworząc grubość, gdy pojazd porusza się wolniej. Możesz nawet dołączyć do przeciw ze źródeł spoza Fleet Engine i na ich podstawie określ styl obiektu Polyline i informacjami o nich.

Dostosowania możesz określić za pomocą parametrów podanych w FleetEngineTripLocationProviderOptions 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:

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ć aktywny obiekt Polyline stylu. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego obiektu Polyline przy użyciu dowolnego z wymienionych wcześniej parametrów dostosowania linii łamanej.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.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. Tworzenie obiektu Polyline niewidoczny, ustaw jego visible usługa:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

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

Fleet Engine zwraca dane o szybkości ruchu dla aktywnych i pozostałych ścieżek dla poniższy pojazd. Możesz użyć tych informacji, aby określić styl elementu Polyline według prędkości ruchu w obiektach:

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

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

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

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

Aby zastąpić pakiet SDK JavaScript, istniejąca mapa, 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, 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 z o podanym identyfikatorze w pobliżu Uluru, teraz zostanie wyświetlony na mapie.