自定义添加到地图中的标记的外观和风格。您可以通过以下两种方式自定义添加到地图的标记的外观和风格:
根据类型设置标记样式:指定
MarkerOptions
对象来为相同类型的标记设置样式。您指定的更改 并会在创建每个标记后应用,从而覆盖所有默认选项。 如需查看示例,请参阅 在本部分中,使用MarkerOptions
更改标记的样式。 指南。根据数据设置标记样式:指定自定义函数 样式标记。您可以根据历程中的数据设置样式 分享或来自外部来源:
旅程分享的数据:历程分享会将标记数据传递给 自定义函数(包括标记所代表的对象类型): 车辆、出发地、航点或目的地然后,标记样式会根据标记元素的当前状态而发生变化。例如,在车辆完成行程之前剩余的路点数量。
外部来源:您可以将历程分享数据与 Fleet Engine 以外的来源的数据,并根据此设置设置标记的样式。 信息
如需查看示例,请参阅 使用自定义函数更改标记的样式 。
为标记添加点击处理功能:例如, 请参阅添加点击处理。
标记自定义选项
这两个选项都使用 Google
Maps JavaScript API
FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
使用 MarkerOptions
更改标记的样式
以下示例展示了如何使用以下代码配置车辆标记样式:
一个 MarkerOptions
对象。遵循此模式可自定义任何图片的样式
标记中使用了
标记自定义选项。
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
使用自定义函数更改标记的样式
以下示例展示了如何使用 自定义功能遵循此模式可自定义任何图片的样式 标记中任意参数的自定义标记(可选) 标记自定义选项。
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
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.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};