Настройте внешний вид маркеров, добавленных на карту. Настройте внешний вид маркеров, добавленных на карту, двумя способами:
Маркеры стиля на основе типа . Укажите объект
MarkerOptions
, чтобы задать стиль маркеров того же типа. Указанные вами изменения затем применяются после создания каждого маркера, перезаписывая любые параметры по умолчанию. Примеры см. в разделе Изменение стиля маркеров с помощьюMarkerOptions
в этом руководстве.Маркеры стиля на основе данных : укажите функцию настройки для стилизации маркеров на основе данных. Вы можете оформить стиль на основе данных из истории путешествий или из внешних источников:
Данные из совместного использования поездок : функция совместного использования поездок передает данные маркера в функцию настройки, включая тип объекта, который представляет маркер: транспортное средство, пункт отправления, промежуточную точку или пункт назначения. Затем стиль маркера изменяется в зависимости от текущего состояния элемента маркера. Например, количество путевых точек, оставшихся до завершения поездки.
Внешние источники : вы можете объединить данные о совместном путешествии с данными из источников за пределами Fleet Engine и также стилизовать маркер на основе этой информации.
Примеры см. в разделе Изменение стиля маркеров с помощью функций настройки в этом руководстве.
Добавьте обработку кликов к маркерам . Примеры см. в разделе «Добавление обработки кликов» .
Параметры настройки маркера
Оба варианта используют следующие параметры настройки в API JavaScript Карт Google в разделе FleetEngineTripLocationProviderOptions
:
-
vehicleMarkerCustomization
-
originMarkerCustomization
-
waypointMarkerCustomization
-
destinationMarkerCustomization
Измените стиль маркеров с помощью MarkerOptions
В следующем примере показано, как настроить стиль маркера транспортного средства с помощью объекта MarkerOptions
. Следуйте этому шаблону, чтобы настроить стиль любого маркера, используя любую из настроек маркера, перечисленных в разделе «Параметры настройки маркера» .
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Машинопись
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Измените стиль маркеров с помощью функций настройки.
В следующем примере показано, как настроить стиль маркера транспортного средства с помощью функций настройки. Следуйте этому шаблону, чтобы настроить стиль любого маркера, используя любой из параметров настройки маркера, перечисленных в разделе «Параметры настройки маркера» .
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
Машинопись
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
Добавить обработку кликов к маркерам
В следующем примере показано, как добавить обработку щелчков к маркеру транспортного средства. Следуйте этому шаблону, чтобы добавить обработку кликов к любому маркеру, используя любой из параметров настройки маркера, перечисленных в разделе «Параметры настройки маркера» .
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Машинопись
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};