Эта страница переведена с помощью Cloud Translation API.

Следите за путешествием в JavaScript

Выберите платформу: Android iOS JavaScript

Когда вы отслеживаете поездку, ваше приложение отображает потребителю местоположение соответствующего транспортного средства. Для этого приложению необходимо начать отслеживать поездку, обновлять информацию о ходе поездки и прекратить отслеживать поездку после её завершения.

В настоящем документе рассматриваются следующие ключевые этапы этого процесса:

Настроить карту
Инициализируйте карту и отобразите общий маршрут
Обновляйте и отслеживайте ход поездки
Остановить отслеживание поездки
Обработка ошибок поездки

Настроить карту

Чтобы отслеживать получение или доставку груза в веб-приложении, необходимо загрузить карту и создать экземпляр Consumer SDK для отслеживания поездки. Вы можете загрузить новую карту или использовать существующую. Затем с помощью функции инициализации создайте экземпляр Consumer SDK, чтобы вид карты соответствовал местоположению отслеживаемого товара.

Загрузите новую карту с помощью JavaScript API Google Maps

Чтобы создать новую карту, загрузите JavaScript API Google Карт в своё веб-приложение. В следующем примере показано, как загрузить JavaScript API Google Карт, включить SDK и запустить проверку инициализации.

Параметр callback запускает функцию initMap после загрузки API.
Атрибут defer позволяет браузеру продолжать отображать остальную часть страницы, пока загружается API.

Используйте функцию initMap для создания экземпляра Consumer SDK. Например:

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

Загрузить существующую карту

Вы также можете загрузить существующую карту, созданную с помощью Google Maps JavaScript API, например ту, которую вы уже используете.

Например, предположим, что у вас есть веб-страница со стандартной сущностью google.maps.Map , на которой отображается маркер, как определено в следующем HTML-коде. Карта отображается с использованием той же функции initMap в обратном вызове в конце:

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

Заменить существующую карту

Вы можете заменить существующую карту, содержащую маркеры или другие настройки, не теряя эти настройки.

Например, если у вас есть веб-страница со стандартной сущностью google.maps.Map , на которой отображается маркер, вы можете заменить карту, сохранив маркер. В этом разделе описывается, как это сделать.

Чтобы заменить карту и сохранить настройки, добавьте возможность совместного использования маршрутов на HTML-страницу, выполнив следующие шаги, которые также пронумерованы в следующем примере:

Добавьте код для фабрики токенов аутентификации.
Инициализируйте поставщик местоположения в функции initMap() .
Инициализируйте представление карты в функции initMap() . Представление содержит карту.
Перенесите свои настройки в функцию обратного вызова для инициализации представления карты.
Добавьте библиотеку местоположений в загрузчик API.

Следующий пример показывает, какие изменения необходимо внести. Если вы совершаете поездку с указанным идентификатором рядом с Улуру, она теперь отображается на карте:

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

Инициализируйте карту и отобразите ход поездки

Когда поездка начинается, вашему приложению необходимо создать экземпляр поставщика местоположения поездки, а затем инициализировать карту, чтобы начать делиться информацией о ходе поездки. Примеры см. в следующих разделах.

Создать поставщика местоположения поездки

В JavaScript SDK есть предопределенный поставщик местоположения для API совместных поездок Fleet Engine. Используйте идентификатор вашего проекта и ссылку на фабрику токенов для его создания.

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

Машинопись

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

Инициализировать вид карты

После загрузки JavaScript SDK инициализируйте представление карты и добавьте его на HTML-страницу. Ваша страница должна содержать элемент <div> , содержащий представление карты. В следующем примере элемент <div> называется 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);

Машинопись

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

Обновляйте и отслеживайте ход поездки

Ваше приложение должно отслеживать события и обновлять информацию о ходе поездки по мере её выполнения. Вы можете получить метаданные о поездке из объекта задачи, используя поставщик местоположения. Метаданными являются расчетное время прибытия и оставшееся расстояние до места посадки или высадки. Изменения метаданных запускают событие обновления . В следующем примере показано, как отслеживать эти события изменения.

JavaScript

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

Машинопись

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

Остановить отслеживание поездки

По завершении поездки необходимо отключить отслеживание поездки поставщиком местоположения. Для этого необходимо удалить идентификатор поездки и поставщика местоположения. Примеры см. в следующих разделах.

Удалить идентификатор поездки из поставщика местоположения

В следующем примере показано, как удалить идентификатор поездки из поставщика местоположения.

JavaScript

locationProvider.tripId = '';

Машинопись

locationProvider.tripId = '';

Удалить поставщика местоположения из вида карты

В следующем примере показано, как удалить поставщика местоположения из представления карты.

JavaScript

mapView.removeLocationProvider(locationProvider);

Машинопись

mapView.removeLocationProvider(locationProvider);

Обработка ошибок поездки

Ошибки, возникающие асинхронно при запросе информации о поездке, запускают события ошибок. В следующем примере показано, как прослушивать эти события для обработки ошибок.

JavaScript

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

Машинопись

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

Что дальше?

Оформите карту

Следите за путешествием в JavaScript Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Настроить карту

Загрузите новую карту с помощью JavaScript API Google Maps

Загрузить существующую карту

Заменить существующую карту

Инициализируйте карту и отобразите ход поездки

Создать поставщика местоположения поездки

JavaScript

Машинопись

Инициализировать вид карты

JavaScript

Машинопись

Обновляйте и отслеживайте ход поездки

JavaScript

Машинопись

Остановить отслеживание поездки

Удалить идентификатор поездки из поставщика местоположения

JavaScript

Машинопись

Удалить поставщика местоположения из вида карты

JavaScript

Машинопись

Обработка ошибок поездки

JavaScript

Машинопись

Что дальше?

Следите за путешествием в JavaScript