Ta strona została przetłumaczona przez Cloud Translation API.

Monitorowanie floty przy użyciu biblioteki śledzenia JavaScript

Biblioteka śledzenia floty w języku JavaScript umożliwia wizualizację lokalizacji we flotach – niemal w czasie rzeczywistym. Biblioteka używa interfejsu Na żądanie Przejazdy i dostawy Interfejs API co pozwala na wizualizację pojazdów i podróży. Flota JavaScriptu Biblioteka śledzenia zawiera dostępny komponent mapy JavaScript dla standardowej encji google.maps.Map i komponentów danych w połączyć z Fleet Engine.

Komponenty

Biblioteka śledzenia floty w JavaScripcie udostępnia komponenty do wizualizacji pojazdów i punktów pośrednich podróży, a także nieprzetworzone pliki danych dotyczące czasu przyjazdu i pozostałych odległość do niej.

Widok mapy śledzenia floty

Komponent widoku mapy Śledzenia floty wizualizuje lokalizację pojazdów oraz punkty pośrednie podróży. Jeśli trasa pojazdu jest znana, komponent widoku mapy animuje pojazd, gdy porusza się on po przewidywanej ścieżce.

Widok mapy śledzenia floty
przykład

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 dla pojazdów

Dostawca lokalizacji pojazdu wyświetla informacje o lokalizacji pojedynczego pojazdu. Zawiera informacje o lokalizacji pojazdu i bieżącej podróży przypisanej do pojazdu.

Dostawca lokalizacji floty

Dostawca lokalizacji floty wyświetla informacje o lokalizacji wielu pojazdów. Możesz użyć filtrów, aby wyświetlić konkretny pojazd i jego lokalizację, lub wyświetlanie lokalizacji pojazdów dla całej floty.

Kontrolowanie widoczności śledzonych lokalizacji

Reguły widoczności określają, kiedy obiekt śledzonej lokalizacji jest widoczny na mapie dla dostawcy lokalizacji Fleet Engine. Uwaga: korzystanie z lokalizacji niestandardowej lub pochodnej może zmienić reguły widoczności.

Pojazdy

Pojazd jest widoczny od razu po jego utworzeniu we Fleet Engine. gdy parametr pojazd_state to Online. Oznacza to, że pojazd może być widoczny nawet gdy do pojazdu nie jest przypisana żadna aktualna podróż.

Znaczniki lokalizacji punktu pośredniego

Znacznik lokalizacji punktu pośredniego wskazuje punkty na trasie początkowej podróży pojazdu który ma początek, a kończy ostatecznym celem podróży. Lokalizacja punktu na trasie znaczniki można zdefiniować w następujący sposób:

Punkt początkowy – wskazuje lokalizację początkową podróży pojazdu
Średni – wskazuje międzylądowania na trasie dojazdu pojazdem.
Cel podróży – wskazuje końcową lokalizację podróży pojazdem.

Zaplanowane punkty na trasie pojazdu są wyświetlane na mapie jako punkt początkowy, pośredni i miejsc docelowych.

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

Przed użyciem biblioteki śledzenia flotowej w JavaScripcie zapoznaj się z z Fleet Engine i uzyskaniem interfejsu API . Następnie utwórz roszczenia dotyczące identyfikatora podróży i identyfikatora pojazdu.

Tworzenie roszczenia dotyczącego identyfikatora podróży i identyfikatora pojazdu

Aby śledzić pojazdy za pomocą lokalizacji pojazdu dostawcy, utwórz token sieciowy JSON (JWT) z podróżą. Roszczenie dotyczące dokumentu tożsamości i identyfikatora pojazdu.

Aby utworzyć ładunek JWT, dodaj dodatkową deklarację w sekcji autoryzacji kluczami tripid i vehicleid oraz ustaw value każdego klawisza na *. Token należy utworzyć za pomocą superużytkownika Fleet Engine Service w chmurze Rola uprawnień. Pamiętaj, że daje to szeroki dostęp z możliwością tworzenia, odczytu i modyfikowania floty encje wyszukiwarki. Należy je udostępniać tylko zaufanym użytkownikom.

Poniższy przykład pokazuje, jak utworzyć token do śledzenia według pojazdu i zadanie:

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

Tworzenie modułu pobierania tokenów uwierzytelniania

Biblioteka śledzenia floty JavaScriptu żąda tokena przy użyciu uwierzytelniania 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.

Możesz utworzyć moduł pobierania tokenów uwierzytelniania, aby pobierać token utworzony za pomocą odpowiednie deklaracje na serwerach za pomocą konta usługi. dla swojego projektu. Tokeny należy tworzyć tylko w serwerów i nigdy nie udostępniaj swoich certyfikatów żadnym klientom. W przeciwnym razie możesz które zagrażają bezpieczeństwu systemu.

Moduł pobierania musi zwracać dane struktura z dwoma polami zapakowanymi w obietnicę:

Ciąg token.
Numer expiresInSeconds. Token wygaśnie w tym czasie po 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. w powyższym przykładzie jest podana jako data.ExpiresInSeconds.
Moduł pobierający token uwierzytelniania musi upłynie czas wygaśnięcia (w sekundach, od podczas pobierania) do biblioteki, jak pokazano w przykładzie.
Adres SERVER_TOKEN_URL zależy od implementacji backendu. Są to przykładowe adresy URL:
- https://SERVER_URL/token/driver/VEHICLE_ID
- https://SERVER_URL/token/consumer/TRIP_ID
- https://SERVER_URL/token/fleet_reader

Wczytywanie mapy z HTML

Ten przykład pokazuje, jak wczytać bibliotekę udostępniania czynności JavaScript z określonego adresu URL. Parametr callback wykonuje funkcję initMap po wczytaniu interfejsu API. Atrybut defer pozwala przeglądarce kontynuować renderowanie. reszta strony podczas wczytywania interfejsu API.

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

Obserwuj pojazd

W tej sekcji pokazujemy, jak używać biblioteki śledzenia floty w języku JavaScript do śledzenia pojazdu. Pamiętaj, aby wczytać bibliotekę z funkcji wywołania zwrotnego określonej w parametrze tagu skryptu przed uruchomieniem kodu.

Utwórz instancję dostawcy lokalizacji pojazdu

Biblioteka śledzenia flot w JavaScripcie wstępnie definiuje dostawcę lokalizacji dla Interfejs API przejazdów i dostarczeń popytu. Użyj identyfikatora projektu oraz odwołania do fabrykę tokenów, aby utworzyć jej instancję.

JavaScript

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

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

TypeScript

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

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

Inicjowanie widoku mapy

Po wczytaniu biblioteki udostępniania czynności JavaScript zainicjuj widok mapy i dodaj go do strony HTML. Strona powinna zawierać element <div> który zawiera widok mapy. Element <div> ma nazwę <div> w przykład poniżej.

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 vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-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.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-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

Możesz pobrać metadane pojazdu z obiektu vehicle przy użyciu dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia na miejsce i pozostałe informacje odległość do następnego punktu odbioru lub zwrotu. Zmiany w metatagach informacje wywołują zdarzenie update. Przykład poniżej pokazuje, jak słuchać do tych wydarzeń.

JavaScript

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

TypeScript

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

Wykrywaj błędy

Błędy, które powstają asynchronicznie podczas żądania aktywacji informacji o pojeździe tych zdarzeń. Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń w 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, usuń identyfikator pojazdu od dostawcy lokalizacji.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

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świetlanie floty pojazdów

W tej sekcji pokazujemy, jak za pomocą biblioteki udostępniania czynności JavaScript wyświetlić floty pojazdów. Pamiętaj, aby wczytać bibliotekę z poziomu funkcji wywołania zwrotnego w tagu skryptu przed uruchomieniem kodu.

Utwórz instancję dostawcy lokalizacji floty pojazdów

Biblioteka śledzenia flot w JavaScripcie wstępnie definiuje dostawcę lokalizacji, który pobiera wiele pojazdów z interfejsów API „On Demand Rides” i „Deliveries”. Użyj identyfikatora projektu oraz odwołania do modułu pobierania tokenów w celu jego utworzenia.

JavaScript

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

          // Optionally, specify location bounds to
          // limit which 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 vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which 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 vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

vehicleFilter określa zapytanie używane do filtrowania pojazdów wyświetlanych na mapie. Ten filtr jest przekazywany bezpośrednio do Fleet Engine. Zobacz ListVehiclesRequest 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ę, dopóki tego nie ustawisz.

Po utworzeniu dostawcy lokalizacji zainicjuj mapę widok.

Ustawianie ograniczeń lokalizacji w widoku mapy

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

Możesz pobrać metadane floty z obiektu vehicles przy użyciu dostawcy lokalizacji. Metadane obejmują właściwości pojazdu takie jak stan nawigacji, odległość do następnego punktu pośredniego i atrybuty niestandardowe; zobacz odwołanie dokumentacja . Zmiana metainformacji aktywuje zdarzenie aktualizacji. Z przykładu poniżej dowiesz się, jak wychwytywać zdarzenia zmiany.

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

Wykrywaj błędy

Błędy, które pojawiają się asynchronicznie podczas żądania informacji o flocie pojazdów 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, ustaw granice dostawcy lokalizacji na wartość 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);

Dostosuj wygląd i styl mapy podstawowej

Aby dostosować wygląd i styl komponentu map, wybierz odpowiedni styl mapy, korzystając z 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. Aby zastosować styl do JavaScript śledzenia floty, 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 identyfikatorem 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 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ą 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.

Możesz łatwo dokonać dostosowania, podając MarkerOptions obiekt zostanie zastosowany do wszystkich znaczników tego samego typu. Zmiany określone w są stosowane po utworzeniu każdego znacznika, zastępując wszystkie domyślne .

Bardziej zaawansowaną opcją jest określenie funkcji dostosowania. Funkcje dostosowywania pozwalają na określanie stylu znaczników na podstawie danych, a także np. dodanie do znaczników interaktywności, np. obsługi kliknięć. Konkretnie: flota Śledzenie przekazuje do funkcji dostosowywania dane dotyczące typu obiektu znacznik reprezentuje pojazd, zatrzymanie lub zadanie. Pozwoli to nadać stylom znacznika zmieniać się zależnie od bieżącego stanu samego elementu znacznika; Na przykład liczby wolnych przystanków lub typu zadania. Można nawet złączać je z danymi z: spoza Fleet Engine i określić styl znacznika na podstawie tych informacji.

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 FleetEngineFleetLocationProvider.vehicleFilter Jeśli jednak potrzebna jest dodatkowa funkcja filtrowania, można zastosować za pomocą funkcji dostosowywania.

Biblioteka śledzenia floty udostępnia te parametry dostosowania:

Zmień styl znaczników za pomocą atrybutu `MarkerOptions`

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

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 powyżej parametrów dostosowania.

JavaScript

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

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

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

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

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    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

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Korzystanie z dostosowywania linii łamanej podczas podążania za pojazdem

Za pomocą biblioteki śledzenia floty możesz też dostosować wygląd i styl trasą, którą jedziesz zgodnie z zasadami. 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 FleetEngineVehicleLocationProviderOptions 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ć 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.vehicle.waypoints[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: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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 =
  FleetEngineVehicleLocationProvider.
      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) => {
    FleetEngineVehicleLocationProvider.
        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 =
  FleetEngineVehicleLocationProvider.
      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: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        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

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

Z przykładu poniżej dowiesz się, jak utworzyć obiekt InfoWindow i dołączyć go do znacznik pojazdu.

JavaScript

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 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 vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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 dopasowanie widocznego obszaru na mapie do pojazdu i przewidywanej trasy przez wyłączenie automatycznego dopasowania. Następujący przykład pokazuje: jak wyłączyć automatyczne dopasowanie podczas konfigurowania mapy udostępniania podróży widok.

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 Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // 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 Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, 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:

Dodaj kod fabryki tokenów uwierzytelniania.
Zainicjuj dostawcę lokalizacji w funkcji initMap().
Zainicjuj widok mapy w funkcji initMap(). Widok zawiera mapy.
Przenieś dostosowanie do funkcji wywołania zwrotnego dla widoku mapy jego zainicjowanie.
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 FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          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.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // 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 Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, 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&v=beta"
    ></script>
  </body>
</html>

Jeśli będziesz obsługiwać pojazd o podanym identyfikatorze w pobliżu Oracle Park, zostanie on wyświetlony mapy.

Monitorowanie floty przy użyciu biblioteki śledzenia JavaScript

Komponenty

Widok mapy śledzenia floty

Dostawcy lokalizacji

Dostawca lokalizacji dla pojazdów

Dostawca lokalizacji floty

Kontrolowanie widoczności śledzonych lokalizacji

Pojazdy

Znaczniki lokalizacji punktu pośredniego

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

Tworzenie roszczenia dotyczącego identyfikatora podróży i identyfikatora pojazdu

Tworzenie modułu pobierania tokenów uwierzytelniania

JavaScript

TypeScript

Wczytywanie mapy z HTML

Obserwuj pojazd

Utwórz instancję dostawcy lokalizacji pojazdu

JavaScript

TypeScript

Inicjowanie widoku mapy

JavaScript

TypeScript

Nasłuchuj zdarzeń zmian

JavaScript

TypeScript

Wykrywaj błędy

JavaScript

TypeScript

Zakończ śledzenie

JavaScript

TypeScript

Usuń dostawcę lokalizacji z widoku mapy

JavaScript

TypeScript

Wyświetlanie floty pojazdów

Utwórz instancję dostawcy lokalizacji floty pojazdów

JavaScript

TypeScript

Ustawianie ograniczeń lokalizacji w widoku mapy

JavaScript

TypeScript

Nasłuchuj zdarzeń zmian

JavaScript

TypeScript

Wykrywaj błędy

Zakończ śledzenie

JavaScript

TypeScript

Usuń dostawcę lokalizacji z widoku mapy

JavaScript

TypeScript

Dostosuj wygląd i styl mapy podstawowej

Używaj stylu mapy w chmurze

JavaScript

TypeScript

Używaj stylu mapy opartego na kodzie

JavaScript

TypeScript

Dostosowywanie znaczników

Zmień styl znaczników za pomocą atrybutu MarkerOptions

JavaScript

TypeScript

Zmienianie stylu znaczników za pomocą funkcji dostosowywania

JavaScript

TypeScript

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

JavaScript

TypeScript

Filtruj widoczne znaczniki

JavaScript

TypeScript

Korzystanie z dostosowywania linii łamanej podczas podążania za pojazdem

Zmień styl Polyline obiektów za pomocą PolylineOptions

JavaScript

TypeScript

Zmień styl Polyline obiektu za pomocą funkcji dostosowywania

JavaScript

TypeScript

Kontroluj widoczność obiektów Polyline

JavaScript

Zmień styl znaczników za pomocą atrybutu `MarkerOptions`

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

Zmień styl `Polyline` obiektu za pomocą funkcji dostosowywania

Kontroluj widoczność obiektów `Polyline`

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

Aby wyświetlać `InfoWindow` obok pojazdu lub znacznika lokalizacji