本文档介绍了如何在地图中自定义车辆和位置标记 您用于面向消费者的网页版货运跟踪应用
利用 JavaScript Consumer SDK，您可以自定义两个应用的外观 添加到地图的标记类型：
- 送货车辆标记：使用
deliveryVehicleMarkerCustomization - 目的地标记：使用
destinationMarkerCustomization
您可以通过以下两种方式之一执行此操作：
- 最简单：指定要应用于所有标记的
MarkerOptions对象 同一类型。然后，使用方 SDK 在两个 情况：向地图添加标记之前，以及使用数据的 标记的内容已更改。 - 更高级：指定自定义函数。自定义函数 支持根据数据设置标记的样式 标记互动，例如点击处理。具体而言， 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();