このドキュメントでは、地図上の追跡対象車両のルートのデザインと操作性をカスタマイズする方法について説明します。ルートは地図上にポリラインで描画されます。ライブラリは、車両のアクティブなパスまたは残りのパスの座標のペアごとに google.maps.Polyline オブジェクトを作成します。Polyline オブジェクトのスタイルを設定するには、ライブラリが次の 2 つの状況で適用するポリラインのカスタマイズを指定します。
- 地図にオブジェクトを追加する前に
- オブジェクトに使用されるデータが変更された場合
ポリラインのスタイルを設定する
マーカーをカスタマイズできるのと同様に、ルートのポリラインはさまざまな方法でスタイル設定できます。
タイプ別にルートのポリラインをスタイル設定する:
PolylineOptionsを使用して、一致するすべてのPolylineオブジェクトが作成または更新されたときに適用します。例については、タイプ別にポリラインのスタイルを設定するをご覧ください。データに基づいてルートのポリラインのスタイルを設定する: フリート トラッキングのデータまたは外部ソースのデータに基づいて、カスタマイズ関数を指定します。
フリート トラッキングのデータ: フリート トラッキングは、現在の車両の状態に関するデータなど、ポリライン データをカスタマイズ関数に渡します。このデータに基づいてポリラインのスタイルを設定できます。たとえば、車両の速度が遅い場合は
Polylineオブジェクトの色を濃くしたり、太くしたりできます。外部ソース: 車両追跡データを Fleet Engine 以外のソースのデータと組み合わせて、その情報に基づいて
Polylineオブジェクトのスタイルを設定できます。
例については、データに基づいてポリラインのスタイルを設定するをご覧ください。
ルートのポリラインの表示を制御する:
visibleプロパティを使用して、ポリラインの表示と非表示を切り替えることができます。詳しくは、このガイドのポリラインの表示 / 非表示を切り替えるをご覧ください。車両または位置マーカーの追加情報を表示する:
infowindowプロパティを使用して追加情報を表示できます。詳細については、このガイドの車両または場所マーカーの追加情報を表示するをご覧ください。
ポリラインのカスタマイズオプション
次のカスタマイズ オプションは、FleetEngineVehicleLocationProviderOptions と FleetEngineDeliveryVehicleLocationProviderOptions の両方で利用できます。
車両の走行経路のさまざまな状態に合わせてカスタマイズを設定できます。
すでに通った道： 使用
takenPolylineCustomization-オンデマンド旅行、スケジュールされたタスク参照。アクティブに移動する経路： 使用
activePolylineCustomization-オンデマンド旅行、スケジュールされたタスク参照。まだ移動していないパス:
remainingPolylineCustomization- オンデマンド トリップ、スケジュール済みタスクの参照を使用します。
ルートのポリラインをタイプ別にスタイル設定する
ルート ポリラインをタイプ別にスタイル設定するには、PolylineOptions を使用して Polyline オブジェクトのスタイルを変更します。
次の例は、PolylineOptions を使用して Polyline オブジェクトのスタイルを設定する方法を示しています。このパターンに従って、あらゆるスタイルのスタイルをカスタマイズしますPolylineルートポリラインのカスタマイズのいずれかを使用してオブジェクトを作成します。ポリラインのカスタマイズオプションこのガイドでは。
オンデマンドの乗車またはスケジュールされたタスクの例
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
データを使用してルートのポリラインのスタイルを設定する
データを使用してルートのポリラインのスタイルを設定するには、カスタマイズ関数を使用して Polyline オブジェクトのスタイルを変更します。
次の例は、カスタマイズ関数を使用してアクティブ ルートのスタイルを設定する方法を示しています。このパターンに沿って、このガイドのポリラインのカスタマイズ オプションに記載されているポリラインのカスタマイズ パラメータを使用して、任意の Polyline オブジェクトのスタイルをカスタマイズします。
オンデマンド乗車サービスの例
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
スケジュール設定されたタスクの例
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
交通状況を考慮したスタイルの例（オンデマンドの乗車のみ）
Fleet Engine は、追跡対象車両のアクティブなパスと残りのパスの交通速度データを返します。この情報を使用して、トラフィック速度に応じて Polyline オブジェクトのスタイルを設定できます。
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
ポリラインの表示を制御する
デフォルトでは、すべての Polyline オブジェクトが表示されます。Polyline オブジェクトを非表示にするには、visible プロパティを false に設定します。
オンデマンドの乗車またはスケジュールされたタスクの例
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
車両または場所のマーカーの情報ウィンドウを表示する
InfoWindow を使用して、車両または位置マーカーに関する追加情報を表示できます。
次の例は、InfoWindow を作成して車両マーカーにアタッチする方法を示しています。
オンデマンド乗車サービスの例
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 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});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 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();
スケジュール設定されたタスクの例
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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();