このドキュメントでは、地図上の車両マーカーと位置マーカーをカスタマイズする方法について説明します 消費者向けのウェブベースの配送追跡アプリに使用する識別子です。
JavaScript Consumer SDK を使用すると、2 つの SDK のデザインを 地図に追加されるマーカーのタイプ:
- 配達車両マーカー:
deliveryVehicleMarkerCustomizationを使用します。 - 目的地のマーカー:
destinationMarkerCustomizationを使用します。
次の 2 つの方法があります。
- 最もシンプル: すべてのマーカーに適用する
MarkerOptionsオブジェクトを指定します。 使用できます。Consumer SDK はスタイル設定を 2 つの要素で 地図へのマーカーの追加前や、データの使用時にデータが 変更されています。 - 高度: カスタマイズ関数を指定します。カスタマイズ関数 データに基づいてマーカーのスタイルを設定したり、 クリック処理など、マーカーに対するインタラクティブな操作を提供します。具体的には、コンシューマは 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 を使用すると、特定のリソースに関する追加情報を表示できます。
表示できるようになります。次の例では、Cloud Storage バケットを
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();