このドキュメントでは、追跡対象車両のルートの外観を地図上でカスタマイズする方法について説明します。ルートは、地図上にポリラインで描画されます。ペアごとに、
車両のアクティブな、または残りのパスの座標(ライブラリによって作成されるパス)
google.maps.Polyline
オブジェクト。
Polyline
オブジェクトのスタイルを設定するには、
ライブラリは次の 2 つの状況に適用されます。
- オブジェクトを地図に追加する前に
- オブジェクトに使用するデータが変化したとき
ポリラインをスタイル設定する
マーカーをカスタマイズする場合と同様に、経路ポリラインのスタイルを設定できます。 さまざまな方法があります。
タイプ別にルート ポリラインのスタイルを設定する:
PolylineOptions
すべての一致のPolyline
オブジェクトに適用されます。 作成または更新されました。例については、タイプ別にポリラインのスタイルを設定するをご覧ください。データに基づいて経路のポリラインのスタイルを設定する: カスタマイズ関数を指定します。 フリート追跡または外部ソースからのデータに基づく:
フリート追跡からのデータ: フリート追跡により、ポリラインデータが カスタマイズ機能(現在の車両に関するデータなど) あります。このデータに基づいてポリラインのスタイルを設定できます(色付けなど)。
Polyline
オブジェクトをより深いシェードにしたり、 速度が低下します。外部ソース: フリート トラッキング データを Fleet Engine 外部のソースのデータと組み合わせて、その情報に基づいて
Polyline
オブジェクトのスタイルを設定できます。
例については、データに基づいてポリラインをスタイル設定するをご覧ください。
経路のポリラインの表示 / 非表示をコントロールする: 表示 / 非表示を切り替えることができます。
visible
プロパティを使ってポリラインを作成しましょう。詳しくは、 このガイドのポリラインの表示を制御します。車両や位置マーカーの追加情報を表示する:
infowindow
プロパティを使用して追加情報を表示できます。対象 詳細については、以下をご覧ください。 車両または位置マーカーの追加情報を表示する: ご覧ください。
ポリラインのカスタマイズ オプション
どちらのサービスでも、以下のカスタマイズ オプションを使用できます。
FleetEngineVehicleLocationProviderOptions
および
FleetEngineDeliveryVehicleLocationProviderOptions
。
さまざまな経路状態のカスタマイズを車両の
ジャーニー:
すでに走行したパス:
takenPolylineCustomization
- オンデマンド ルート、スケジュールされたタスクのリファレンスを使用します。現在移動中の経路:
activePolylineCustomization
を使用します。 オンデマンドのルート、スケジュール済みタスクのリファレンス。未移動のパス:
remainingPolylineCustomization
を使用します。 オンデマンドのルート、スケジュール済みタスクのリファレンス。
ルートのポリラインをタイプ別にスタイル設定する
経路のポリラインをタイプ別にスタイル設定するには、Polyline
オブジェクトのスタイルを変更します。
PolylineOptions
を使用します。
次の例は、Polyline
オブジェクトのスタイル設定を設定する方法を示しています。
PolylineOptions
に置き換えます。このパターンに沿って
にリストされているルート ポリラインのカスタマイズのいずれかを使用した 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();