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

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

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

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

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

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

Создайте карту

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

Загрузите новую карту, используя JavaScript API Google Maps.

Для создания новой карты загрузите JavaScript API Google Maps в ваше веб-приложение. В следующем примере показано, как загрузить JavaScript API Google Maps, включить 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>

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

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

Например, предположим, у вас есть веб-страница со стандартным объектом 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.

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

    <!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 Ridesharing. Используйте идентификатор вашего проекта и ссылку на вашу фабрику токенов, чтобы создать его экземпляр.

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