このドキュメントでは、消費者向けのウェブベースの配送追跡アプリで使用する地図で、車両と位置情報のマーカーをカスタマイズする方法について説明します。
JavaScript Consumer SDK を使用すると、地図に追加する次の 2 種類のマーカーの外観をカスタマイズできます。
- 配送車両のマーカー:
deliveryVehicleMarkerCustomizationを使用 - リンク先マーカー:
destinationMarkerCustomizationを使用
次の 2 つの方法で行うことができます。
- 最も簡単な方法: 同じタイプのすべてのマーカーに適用する
MarkerOptionsオブジェクトを指定します。その後、Consumer SDK は、マーカーをマップに追加する前と、マーカーに使用されるデータが変更されたときに、2 つの状況でスタイル設定を適用します。 - 高度な設定: カスタマイズ関数を指定します。カスタマイズ機能を使用すると、データに基づいてマーカーのスタイルを設定したり、クリック処理などのインタラクティビティをマーカーに追加したりできます。具体的には、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();