Настроить маркеры

Настройте внешний вид маркеров, добавленных на карту. Настройте внешний вид маркеров, добавленных на карту, двумя способами:

1. Маркеры стиля на основе типа . Укажите объект MarkerOptions , чтобы задать стиль маркеров того же типа. Указанные вами изменения затем применяются после создания каждого маркера, перезаписывая любые параметры по умолчанию. Примеры см. в разделе Изменение стиля маркеров с помощью MarkerOptions в этом руководстве.

2. Маркеры стиля на основе данных : укажите функцию настройки для стилизации маркеров на основе данных. Вы можете оформить стиль на основе данных из истории путешествий или из внешних источников:

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

   • Внешние источники : вы можете объединить данные о совместном путешествии с данными из источников за пределами Fleet Engine и также стилизовать маркер на основе этой информации.

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

3. Добавьте обработку кликов к маркерам . Примеры см. в разделе «Добавление обработки кликов» .

Параметры настройки маркера

Оба варианта используют следующие параметры настройки в API JavaScript Карт Google в разделе FleetEngineTripLocationProviderOptions :

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

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

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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

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

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

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

Что дальше

• Настройка полилиний маршрута