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

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

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.
      });
    }
  };

Что дальше?

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