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