Как настроить маркеры

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

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

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

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

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

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

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

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

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

Дальнейшие действия

• Как настроить ломаные линии маршрута