このドキュメントでは、追跡中のルートのデザインをカスタマイズする方法について説明します。
表示できるようになります。ルートはポリラインで地図上に描画されます。ペアごとに、
車両のアクティブな、または残りのパスの座標（ライブラリによって作成されるパス）
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();