С помощью библиотеки JavaScript для отслеживания транспортных средств вы можете настроить внешний вид маркеров, добавляемых на карту. Это можно сделать, указав настройки маркеров, которые библиотека отслеживания транспортных средств применяет перед добавлением маркеров на карту и при каждом обновлении маркеров. Вы можете настроить внешний вид маркеров следующими способами:
Стилизация маркеров на основе типа : укажите объект
MarkerOptionsдля стилизации маркеров одного типа. Указанные изменения применяются после создания каждого маркера, перезаписывая все параметры по умолчанию. Примеры см. в разделе Стилизация маркеров на основе типа в данном руководстве.Стиль маркеров на основе данных : укажите функцию настройки на основе данных, а также добавьте интерактивность к маркерам, например, обработку щелчков. Вы можете настроить стиль на основе данных отслеживания автопарка или внешних источников:
Данные из системы отслеживания автопарка : система отслеживания автопарка передаёт данные в функцию настройки, включая тип объекта, который представляет маркер: транспортное средство, остановку или задачу. Стиль маркера затем меняется в зависимости от текущего состояния элемента маркера. Например, от количества оставшихся остановок или типа задачи.
Внешние источники : вы можете объединить данные отслеживания автопарка с данными из источников за пределами Fleet Engine, а также оформить маркер на основе этой информации.
Примеры см. в разделе Маркеры стилей на основе данных .
Добавьте обработку щелчков к маркерам : примеры см. в разделе Добавление обработки щелчков .
Фильтрация видимых маркеров : отфильтруйте отображаемые маркеры с помощью функций фильтрации, доступных в поставщике местоположения JavaScript. Например:
Используйте настройку маркеров для отслеживания транспортного средства доставки запланированных задач : вы можете настроить маркеры для отслеживания транспортных средств. Подробнее см. в разделе «Использование настройки маркеров для отслеживания транспортного средства доставки» .
Параметры настройки маркера
Библиотека отслеживания автопарка предоставляет следующие параметры настройки:
Параметры настройки поездок по запросу
Параметры настройки запланированных задач
Маркеры стиля на основе типа
В следующем примере показано, как настроить стиль маркера транспортного средства с помощью объекта 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
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);
}
};