Отслеживание отправлений с помощью библиотеки отслеживания отправлений JavaScript, Отслеживание отправлений с помощью библиотеки отслеживания отправлений JavaScript

Библиотека отслеживания поставок JavaScript позволяет визуализировать местоположение транспортных средств и интересных мест, отслеживаемых в Fleet Engine. Библиотека содержит компонент карты JavaScript, который является полной заменой стандартного объекта google.maps.Map и компонентов данных для подключения к Fleet Engine. Используя библиотеку отслеживания доставки JavaScript, вы можете обеспечить настраиваемое анимированное отслеживание доставки из вашего веб-приложения.

Компоненты

Библиотека отслеживания поставок JavaScript предоставляет компоненты для визуализации транспортного средства и маршрута по мере его продвижения к пункту назначения, а также потоки необработанных данных о расчетном времени прибытия водителя или оставшемся расстоянии, которое осталось проехать.

Просмотр карты отслеживания отправлений

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

Поставщик места отгрузки

Поставщик местоположения отправления вводит информацию о местоположении отслеживаемых объектов на карту отслеживания отправлений для отслеживания отправлений первой и последней мили.

Вы можете использовать поставщика местоположения доставки, чтобы отслеживать:

• Место получения или доставки груза.
• Местоположение и маршрут доставки автомобиля.

Отслеживаемые объекты локации

Поставщик местоположения отслеживает местоположение таких объектов, как транспортные средства и пункты назначения.

Место назначения

Место назначения — это место, где заканчивается путешествие. Для отслеживания отгрузки это запланированное местоположение задачи.

Местоположение автомобиля

Местоположение транспортного средства — это отслеживаемое местоположение транспортного средства. Опционально он может включать маршрут движения транспортного средства.

Сборщик токенов аутентификации

Чтобы контролировать доступ к данным о местоположении, хранящимся в Fleet Engine, вы должны реализовать на своем сервере службу создания JSON Web Token (JWT) для Fleet Engine. Затем внедрите сборщик токенов аутентификации как часть вашего веб-приложения, используя библиотеку JavaScript Journey Sharing Library для аутентификации доступа к данным о местоположении.

Варианты стиля

Стили маркеров и полилиний определяют внешний вид объектов отслеживаемого местоположения на карте. Вы можете использовать пользовательские параметры стиля, чтобы изменить стиль по умолчанию, чтобы он соответствовал стилю вашего веб-приложения.

Контролируйте видимость отслеживаемых местоположений

В этом разделе описаны элементы управления видимостью отслеживаемых объектов на карте. Эти правила применяются к двум категориям объектов:

• Маркер местоположения
• Данные задачи

Видимость маркера местоположения

Все маркеры местоположения пункта отправления и назначения всегда отображаются на карте. Например, место доставки груза всегда отображается на карте, независимо от состояния доставки.

Видимость данных задачи

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

• Задачи недоступности. Вы не можете настроить видимость для этих задач.
• Активные задачи транспортного средства. Вы можете настроить задачи этого типа.
• Неактивные задачи автомобиля. Вы не можете настроить видимость для этих задач.

Задачи недоступности

Если на пути к отслеживаемому заданию есть хотя бы одна задача недоступности (например, если водитель отдыхает или заправляется автомобиль), то машина не видна. Предполагаемое время прибытия и предполагаемое время завершения задачи по-прежнему доступны.

Активные задачи автомобиля

Объект TaskTrackingInfo предоставляет ряд элементов данных, которые можно сделать видимыми в библиотеке отслеживания поставок. По умолчанию эти поля видны, когда задача назначена транспортному средству и когда транспортное средство находится в пределах 5 остановок от задачи. Видимость прекращается, когда задача завершена или отменена. Поля следующие:

• Полилинии маршрута
• Расчетное время до прибытия
• Примерное время выполнения задачи
• Оставшееся расстояние до задачи
• Оставшееся количество стопов
• Местоположение автомобиля

Вы можете настроить конфигурацию видимости для каждой задачи, задав TaskTrackingViewConfig для задачи при создании или обновлении задачи в Fleet Engine. Это создает правила доступности отдельных элементов данных, которые могут основываться на следующих критериях (ниже называемых опцией видимости):

• Оставшееся количество стопов
• Продолжительность до расчетного времени прибытия
• Оставшийся пробег
• Всегда виден
• Никогда не виден

Обратите внимание, что каждый элемент данных может быть связан только с одним вариантом видимости. Невозможно объединить критерии с помощью ИЛИ или И.

Пример настройки следующий. Правила этой настройки:

• Показывать полилинии маршрута, если транспортное средство находится в пределах 3 остановок.
• Покажите расчетное время прибытия, если оставшееся расстояние меньше 5000 метров.
• Никогда не показывайте оставшееся количество остановок.
• Каждое другое поле сохраняет видимость по умолчанию и отображается, когда транспортное средство находится в пределах 5 остановок от задачи.

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

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

Полилинии маршрута и правила видимости местоположения транспортных средств:

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

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

• Если полилинии маршрута и местоположение транспортного средства имеют один и тот же тип параметра видимости:

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

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingStopCountThreshold": 5
    },
  }
  

  • Если полилинии маршрута имеют параметр видимости всегда, местоположение транспортного средства также должно обеспечивать параметр видимости всегда.
  • Если у местоположения транспортного средства есть опция невидимой видимости, полилинии маршрута также должны иметь опцию невидимой видимости.

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

  Пример следующий:

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }
  

  В этом примере местоположение транспортного средства видно только в том случае, если количество оставшихся остановок составляет не менее 3 И оставшееся расстояние поездки составляет не менее 3000 метров.

Начните работу с библиотекой совместного использования JavaScript Journey

Прежде чем использовать библиотеку JavaScript Journey Sharing, убедитесь, что вы знакомы с Fleet Engine и с получением ключа API .

Чтобы отслеживать доставку, сначала создайте заявку на идентификатор отслеживания.

Создайте заявку на идентификатор отслеживания

Чтобы отслеживать доставку с помощью поставщика местоположения доставки , создайте веб-токен JSON (JWT) с заявлением об идентификаторе отслеживания.

Чтобы создать полезную нагрузку JWT, добавьте в раздел авторизации дополнительное утверждение с ключом trackid . Установите в качестве значения идентификатор отслеживания доставки.

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

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

Создайте сборщик токенов аутентификации

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

Сборщик должен вернуть структуру данных с двумя полями, заключенную в промис:

• Строковый token .
• Число expiresInSeconds . Срок действия токена истекает через указанное время после получения.

Библиотека отслеживания поставок 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
  };
}

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

При реализации конечной точки на стороне сервера для выпуска токенов имейте в виду следующее:

• Конечная точка должна вернуть время истечения срока действия токена; в приведенном выше примере он указан как data.ExpiresInSeconds .
• Сборщик токенов аутентификации должен передать в библиотеку время истечения срока действия (в секундах с момента получения), как показано в примере.
• SERVER_TOKEN_URL зависит от реализации вашей серверной части. Это URL- адреса серверной части примера приложения :
  • https:// SERVER_URL /token/delivery_driver/ DELIVERY_VEHICLE_ID
  • https:// SERVER_URL /токен/delivery_consumer/ TRACKING_ID
  • https:// SERVER_URL /токен/fleet_reader

Загрузить карту из HTML

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

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

Следить за отправкой

В этом разделе показано, как использовать библиотеку отслеживания доставки JavaScript для отслеживания получения или доставки груза. Обязательно загрузите библиотеку из функции обратного вызова, указанной в теге скрипта, прежде чем запускать код.

Создание экземпляра поставщика местоположения отгрузки

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

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

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

После загрузки библиотеки JavaScript Journey Sharing инициализируйте представление карты и добавьте его на HTML-страницу. Ваша страница должна содержать элемент <div> , который содержит представление карты. В следующем примере элемент <div> называется map_canvas .

Чтобы избежать условий гонки, установите идентификатор отслеживания для поставщика местоположений в обратном вызове, который вызывается после инициализации карты.

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Идентификатор отслеживания

Идентификатор отслеживания, предоставленный поставщику местоположения, может соответствовать нескольким задачам; например, задача получения и доставки одной и той же посылки или несколько неудачных попыток доставки. Выбирается одна задача для отображения на карте отслеживания отправлений. Задача для показа определяется следующим образом:

1. Если открыта только одна задача по забору, она отображается. Ошибка генерируется, если имеется несколько открытых задач по самовывозу.
2. Если открыта ровно одна задача доставки, она отображается. Ошибка генерируется, если имеется несколько открытых задач по доставке.
3. Если есть закрытые задачи по доставке:
   • Если есть ровно одна закрытая задача доставки, она отображается.
   • Если имеется несколько закрытых задач по доставке, отображается та, которая имеет самое позднее время завершения.
   • Если имеется несколько закрытых задач доставки, ни одна из которых не имеет времени завершения, генерируется ошибка.
4. Если есть закрытые задачи по самовывозу:
   • Если существует ровно одна закрытая задача самовывоза, она отображается.
   • Если имеется несколько закрытых задач по получению, отображается та, которая имеет самое позднее время завершения.
   • Если существует несколько закрытых задач получения, ни одна из которых не имеет времени завершения, генерируется ошибка.
5. В противном случае задача не отображается.

Слушайте изменения событий

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

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

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

Обработка ошибок

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

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

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

Примечание. Обязательно заключайте вызовы библиотеки в блоки try...catch для обработки непредвиденных ошибок.

Прекратить отслеживание

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

locationProvider.trackingId = '';

locationProvider.trackingId = '';

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

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Настройте внешний вид базовой карты.

Чтобы настроить внешний вид компонента карт, создайте стиль карты с помощью облачных инструментов или задав параметры непосредственно в коде.

Используйте облачный стиль карты

Стилизация карт на основе облака позволяет создавать и редактировать стили карт для любых ваших приложений, использующих Карты Google, из консоли Google Cloud, не требуя внесения каких-либо изменений в код. Стили карты сохраняются как идентификаторы карты в вашем облачном проекте. Чтобы применить стиль к карте отслеживания поставок JavaScript, укажите mapId при создании JourneySharingMapView . Поле mapId нельзя изменить или добавить после создания экземпляра JourneySharingMapView . В следующем примере показано, как включить ранее созданный стиль карты с идентификатором карты.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Используйте стиль карты на основе кода

Еще один способ настройки стиля карты — установить mapOptions при создании JourneySharingMapView .

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Используйте настройки маркеров

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

Самая простая настройка — указать объект MarkerOptions , который будет применяться ко всем маркерам одного типа. Изменения, указанные в объекте, применяются после создания каждого маркера, перезаписывая любые параметры по умолчанию.

Более продвинутый вариант — указать функцию настройки. Функции настройки позволяют стилизовать маркеры на основе данных, а также добавлять к маркерам интерактивность, например обработку кликов. В частности, отслеживание поставок передает в функцию настройки данные о типе объекта, который представляет маркер: транспортное средство или пункт назначения. Это позволяет изменить стиль маркера в зависимости от текущего состояния самого элемента маркера; например, количество запланированных остановок, оставшихся до пункта назначения. Вы даже можете объединить данные из источников за пределами Fleet Engine и стилизовать маркер на основе этой информации.

Библиотека отслеживания поставок предоставляет следующие параметры настройки в FleetEngineShipmentLocationProviderOptions :

• deliveryVehicleMarkerCustomization
• destinationMarkerCustomization

Измените стиль маркеров с помощью MarkerOptions

В следующем примере показано, как настроить стиль маркера транспортного средства с помощью объекта MarkerOptions . Следуйте этому шаблону, чтобы настроить стиль любого маркера, используя любую из настроек маркера, перечисленных выше.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Измените стиль маркеров с помощью функций настройки.

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

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Добавить обработку кликов к маркерам

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

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

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

Использование настроек полилинии

С помощью библиотеки отслеживания отправлений вы также можете настроить внешний вид маршрута отправления на карте. Библиотека создает объект google.maps.Polyline для каждой пары координат на активном или оставшемся пути отправления. Вы можете стилизовать объекты Polyline , указав настройки полилинии. Затем библиотека применяет эти настройки в двух ситуациях: перед добавлением объектов на карту и при изменении данных, используемых для объектов.

Подобно настройке маркера, вы можете указать набор PolylineOptions , который будет применяться ко всем совпадающим объектам Polyline при их создании или обновлении.

Аналогичным образом вы можете указать функцию настройки. Функции настройки позволяют индивидуально стилизовать объекты на основе данных, отправленных Fleet Engine. Функция может изменить стиль каждого объекта в зависимости от текущего состояния отправления; например, окрасив объект Polyline в более глубокий оттенок или сделав его толще, когда автомобиль движется медленнее. Вы даже можете присоединиться к источникам за пределами Fleet Engine и стилизовать объект Polyline на основе этой информации.

Вы можете указать настройки, используя параметры, указанные в FleetEngineShipmentLocationProviderOptions . Вы можете настроить настройки для различных состояний пути в пути автомобиля: уже пройдено, активно движется или еще не пройдено. Параметры следующие:

• takenPolylineCustomization для уже пройденного пути;
• activePolylineCustomization для активно движущегося пути;
• remainingPolylineCustomization для еще не пройденного пути.

Измените стиль объектов Polyline с помощью PolylineOptions

В следующем примере показано, как настроить стиль объекта Polyline с помощью PolylineOptions . Следуйте этому шаблону, чтобы настроить стиль любого объекта Polyline , используя любую из настроек полилинии, перечисленных ранее.

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Измените стиль объектов Polyline с помощью функций настройки.

В следующем примере показано, как настроить стиль активного объекта Polyline . Следуйте этому шаблону, чтобы настроить стиль любого объекта Polyline , используя любой из параметров настройки полилинии, перечисленных ранее.

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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'});
      }
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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'});
      }
    }
  };

Управление видимостью объектов Polyline

По умолчанию все объекты Polyline видимы. Чтобы сделать объект Polyline невидимым, установите его visible :

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Отображение InfoWindow для транспортного средства или маркера местоположения

Вы можете использовать InfoWindow для отображения дополнительной информации о транспортном средстве или маркере местоположения.

В следующем примере показано, как создать InfoWindow и прикрепить его к маркеру транспортного средства:

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

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

Отключить автоматическую установку

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

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

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

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

Например, предположим, что у вас есть веб-страница со стандартным объектом google.maps.Map , на котором отображается маркер:

<!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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, 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>

Чтобы добавить библиотеку JavaScript Journey Sharing:

1. Добавьте код для фабрики токенов аутентификации.
2. Инициализируйте поставщика местоположения в функции initMap() .
3. Инициализируйте представление карты в функции initMap() . Представление содержит карту.
4. Переместите свои настройки в функцию обратного вызова для инициализации представления карты.
5. Добавьте библиотеку местоположений в загрузчик 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
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.FleetEngineShipmentLocationProvider({
    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.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // 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 Uluru
    var marker = new google.maps.Marker({position: uluru, 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.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Если у вас есть отслеживаемая посылка с указанным идентификатором рядом с Улуру, она теперь будет отображаться на карте.