本文档介绍了如何自定义您在面向消费者的基于 Web 的货件跟踪应用中使用的地图中的车辆和位置标记。
借助 JavaScript Consumer SDK，您可以自定义添加到地图中的两种标记的外观和风格：
- 配送车辆标记：使用
deliveryVehicleMarkerCustomization - 目的地标记：使用
destinationMarkerCustomization
您可以通过以下两种方式之一来实现此目的：
- 最简单的方式：指定要应用于所有相同类型标记的
MarkerOptions对象。然后，Consumer SDK 会在两种情况下应用样式：在将标记添加到地图之前，以及在用于标记的数据发生更改时。 - 更高级的方式：指定自定义函数。借助自定义函数，您可以根据数据设置标记的样式，还可以向标记添加互动功能，例如点击处理。具体而言，Consumer SDK 会将有关标记所代表的对象类型（车辆或目的地）的数据传递给自定义函数。这样，标记样式就可以根据标记元素本身的当前状态而变化；例如，到达目的地之前剩余的计划停靠点数量。您甚至可以根据 Fleet Engine 外部来源的数据进行联接，并根据该信息设置标记的样式。
简单示例：使用 MarkerOptions
以下示例展示了如何使用 MarkerOptions 对象配置车辆标记的样式。此示例将标记不透明度设置为 50%。
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
高级示例：使用自定义函数
以下示例展示了如何配置车辆标记的样式，以在车辆到达预定任务的停靠点之前显示车辆的剩余停靠点数量。
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
向标记添加点击处理功能
您可以向任何标记添加点击处理功能，例如以下车辆标记示例。
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
显示标记的其他信息
您可以使用 InfoWindow 显示有关 车辆或地点标记的其他信息。以下示例创建了一个 InfoWindow 并将其附加到车辆标记：
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();