С помощью библиотеки отслеживания автопарка на JavaScript можно настраивать внешний вид маркеров, добавленных на карту. Для этого нужно указать настройки маркеров, которые библиотека отслеживания автопарка будет применять перед добавлением маркеров на карту и при каждом обновлении маркера. Вы можете настроить внешний вид маркеров следующими способами:
Оформление маркеров в зависимости от типа. Укажите объект
MarkerOptions, чтобы оформить маркеры одного типа. Указанные вами изменения применяются после создания каждого маркера и переопределяют настройки по умолчанию. Примеры можно найти в разделе Как задать стиль маркеров на основе типа.Стилизация маркеров на основе данных. Укажите функцию настройки на основе данных, а также добавьте интерактивность маркерам, например обработку кликов. Вы можете настроить стили на основе данных отслеживания автопарка или внешних источников:
Данные отслеживания автопарка. Отслеживание автопарка передает функции настройки данные, в том числе тип объекта, который представляет маркер: транспортное средство, остановка или задача. Стиль маркера меняется в зависимости от его текущего состояния. Например, количество оставшихся остановок или тип задачи.
Внешние источники. Вы можете объединить данные отслеживания автопарка с данными из источников, не связанных с Fleet Engine, и настроить стиль маркера на основе этой информации.
Примеры можно найти в разделе Как задать стиль маркеров на основе данных.
Добавьте обработку кликов по маркерам. Примеры можно найти в разделе Добавление обработки кликов.
Фильтровать видимые маркеры. Вы можете фильтровать маркеры, используя функции фильтрации, доступные в поставщике местоположения JavaScript. Пример:
Используйте настройку маркеров, чтобы отслеживать транспортное средство, выполняющее запланированную задачу. Подробнее о том, как отслеживать транспортное средство с помощью настройки маркеров…
Варианты настройки маркеров
Библиотека отслеживания автопарка предоставляет следующие параметры настройки:
Параметры настройки поездок по запросу
Параметры настройки запланированных задач
Как настроить стиль маркеров в зависимости от типа
В примере ниже показано, как настроить стиль маркера транспортного средства с помощью объекта MarkerOptions. Используйте этот шаблон, чтобы настроить стиль любого маркера, используя любой из вариантов, перечисленных в разделе Варианты настройки маркеров.
Пример поездки по запросу
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Пример запланированной задачи
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Как настроить стили маркеров на основе данных
В примере ниже показано, как настроить стиль маркера автомобиля с помощью функций кастомизации. Следуя этому шаблону, вы можете настроить стиль любого маркера на основе данных, используя любой из вариантов, перечисленных в разделе Варианты настройки маркеров выше.
Пример поездки по запросу
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
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}`);
};
TypeScript
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.
});
}
};
TypeScript
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.
});
}
};
TypeScript
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);
}
};
TypeScript
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);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};