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

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

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

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

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

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

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

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

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

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter
   Примечание. Хотя вы также можете фильтровать видимость маркеров с помощью функций настройки, это может повлиять на производительность. Если вам необходимо это сделать, вызовите setVisible(false) для маркера. Примеры см. в разделе Фильтрация видимых маркеров .

5. Используйте настройку маркеров для отслеживания средств доставки запланированных задач . Вы можете настроить маркеры для отслеживания транспортных средств. Дополнительные сведения см. в разделе Использование настройки маркера для отслеживания средства доставки .

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

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

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

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

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

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

Маркеры стиля в зависимости от типа

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

Пример поездки по требованию

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Машинопись

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Машинопись

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Маркеры стиля на основе данных

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

Пример поездки по требованию

JavaScript

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

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

JavaScript

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

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

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

Пример поездки по требованию

JavaScript

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

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

JavaScript

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 , это может повлиять на производительность. Рекомендуется фильтровать отображаемые маркеры с помощью возможностей фильтрации, доступных в поставщике местоположений JavaScript.

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

Пример поездки по требованию

JavaScript

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

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

JavaScript

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

Что дальше

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