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

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

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

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

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

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

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

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

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

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

Что дальше?

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