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

С помощью библиотеки отслеживания автопарка 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);
    }
  };

Что дальше

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