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

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

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

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

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

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

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

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

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

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

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

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

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 Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

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

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

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

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

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

JavaScript

Машинопись

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

JavaScript

Машинопись

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

JavaScript

Машинопись

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

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

JavaScript

Машинопись

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

JavaScript

Машинопись

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

JavaScript

Машинопись

Что дальше?

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