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

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

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

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

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

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

   Примеры см. в разделе «Маркеры стиля на основе данных» .

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

4. Фильтрация видимых маркеров : Отфильтруйте отображаемые маркеры с помощью возможностей фильтрации, доступных в поставщике местоположения JavaScript. Например:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

5. Используйте настройку маркеров для отслеживания транспортного средства, доставляющего запланированные задачи : Вы можете настроить маркеры для отслеживания транспортных средств. Для получения дополнительной информации см. раздел «Использование настройки маркеров для отслеживания транспортного средства, доставляющего задачи» .

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

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

Параметры настройки поездок по запросу

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Параметры настройки запланированных задач

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Стилевые маркеры, основанные на типе

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

Пример поездок по запросу

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Пример запланированных задач

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Стилевые маркеры, основанные на данных

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

Пример поездок по запросу

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Пример запланированных задач

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

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

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

Пример поездок по запросу

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

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

Пример запланированных задач

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

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

Отфильтруйте видимые маркеры

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

Пример поездок по запросу

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Пример запланированных задач

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Что дальше?

• Оформите карту
• Настройка полилиний