Gdy śledzisz przejazd, aplikacja użytkownika wyświetla mu lokalizację odpowiedniego pojazdu. Aby to zrobić, aplikacja musi zacząć śledzić przejazd, aktualizować postępy w jego trakcie i przestać go śledzić po jego zakończeniu.
Ten dokument zawiera opis tych kluczowych etapów procesu:
- Konfigurowanie mapy
- Inicjowanie mapy i wyświetlanie udostępnionej podróży
- Aktualizowanie i śledzenie postępów przejazdu
- Zatrzymywanie śledzenia przejazdu
- Obsługa błędów dotyczących przejazdów
Konfigurowanie mapy
Aby śledzić odbiór lub dostawę przesyłki w aplikacji internetowej, musisz wczytać mapę i utworzyć instancję pakietu Consumer SDK, aby rozpocząć śledzenie podróży. Możesz wczytać nową mapę lub użyć istniejącej. Następnie używasz funkcji inicjowania, aby utworzyć instancję pakietu Consumer SDK, dzięki czemu widok mapy odpowiada lokalizacji śledzonego elementu.
Wczytywanie nowej mapy za pomocą interfejsu Google Maps JavaScript API
Aby utworzyć nową mapę, wczytaj interfejs Google Maps JavaScript API w aplikacji internetowej. Ten przykład pokazuje, jak wczytać interfejs Google Maps JavaScript API, włączyć pakiet SDK i uruchomić sprawdzanie inicjowania.
- Parametr
callbackuruchamia funkcjęinitMappo wczytaniu interfejsu API. - Atrybut
deferumożliwia przeglądarce dalsze renderowanie pozostałej części strony podczas wczytywania interfejsu API.
Użyj funkcji initMap, aby utworzyć instancję pakietu SDK dla konsumentów. Na przykład:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Wczytywanie istniejącej mapy
Możesz też wczytać istniejącą mapę utworzoną za pomocą interfejsu Google Maps JavaScript API, np. taką, której już używasz.
Załóżmy na przykład, że masz stronę internetową ze standardowym elementem google.maps.Map, na którym wyświetlany jest znacznik zdefiniowany w poniższym kodzie HTML. Poniżej pokazujemy mapę, używając tej samej funkcji initMap w wywołaniu zwrotnym na końcu:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* 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>
Zastępowanie istniejącej mapy
Możesz zastąpić istniejącą mapę, która zawiera znaczniki lub inne dostosowania, bez utraty tych dostosowań.
Jeśli na przykład masz stronę internetową ze standardowym elementem google.maps.Map, na którym wyświetlany jest znacznik, możesz zastąpić mapę i zachować znacznik. W tej sekcji opisano, jak to zrobić.
Aby zastąpić mapę i zachować dostosowania, dodaj udostępnianie przejazdu do strony HTML, wykonując te czynności, które są również ponumerowane w poniższym przykładzie:
Dodaj kod fabryki tokenów uwierzytelniających.
Zainicjuj dostawcę lokalizacji w funkcji
initMap().Zainicjuj widok mapy w funkcji
initMap(). Widok zawiera mapę.Przenieś dostosowanie do funkcji wywołania zwrotnego na potrzeby inicjowania widoku mapy.
Dodaj bibliotekę lokalizacji do modułu ładującego interfejs API.
Poniższy przykład pokazuje, jakie zmiany należy wprowadzić. Jeśli realizujesz przejazd o określonym identyfikatorze w pobliżu Uluru, jest on teraz renderowany na mapie:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, 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>
Inicjowanie mapy i wyświetlanie postępów podróży
Po rozpoczęciu przejazdu aplikacja musi utworzyć instancję dostawcy lokalizacji przejazdu, a następnie zainicjować mapę, aby zacząć udostępniać postępy przejazdu. Przykłady znajdziesz w sekcjach poniżej.
Tworzenie instancji dostawcy lokalizacji przejazdu
Pakiet JavaScript SDK ma wstępnie zdefiniowanego dostawcę lokalizacji dla interfejsu Fleet Engine Ridesharing API. Użyj identyfikatora projektu i odwołania do fabryki tokenów, aby utworzyć jej instancję.
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: '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',
});
Inicjowanie widoku mapy
Po wczytaniu pakietu JavaScript SDK zainicjuj widok mapy i dodaj go do strony HTML. Strona powinna zawierać element <div>, który przechowuje widok mapy. W tym przykładzie element <div> ma nazwę map_canvas.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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 choose.
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.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// 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 starts 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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
Aktualizowanie i śledzenie postępów przejazdu
Aplikacja powinna nasłuchiwać zdarzeń i aktualizować postępy przejazdu w miarę jego trwania. Metainformacje o przejeździe możesz pobrać z obiektu zadania za pomocą dostawcy lokalizacji. Metainformacje obejmują szacowany czas dotarcia na miejsce i pozostałą odległość do miejsca odbioru lub wysiadania. Zmiany w metadanych wywołują zdarzenie aktualizacji. Z poniższego przykładu dowiesz się, jak nasłuchiwać tych zdarzeń zmiany.
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);
});
Zatrzymywanie śledzenia przejazdu
Po zakończeniu przejazdu musisz zatrzymać śledzenie przejazdu przez dostawcę lokalizacji. Aby to zrobić, usuń identyfikator przejazdu i dostawcę lokalizacji. Przykłady znajdziesz w sekcjach poniżej.
Usuwanie identyfikatora przejazdu od dostawcy lokalizacji
Poniższy przykład pokazuje, jak usunąć identyfikator przejazdu od dostawcy lokalizacji.
JavaScript
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
Usuwanie dostawcy lokalizacji z widoku mapy
Ten przykład pokazuje, jak usunąć dostawcę lokalizacji z widoku mapy.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Obsługa błędów dotyczących przejazdów
Błędy, które pojawiają się asynchronicznie podczas żądania informacji o przejeździe, wywołują zdarzenia błędów. Poniższy przykład pokazuje, jak nasłuchiwać tych zdarzeń, aby obsługiwać 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);
});