JavaScript Shipment Tracking Library を使用すると、
Fleet Engine で追跡されている車両と関心のある場所の数。ライブラリ
にドロップイン代替の JavaScript マップ コンポーネントが含まれている
標準の google.maps.Map
エンティティとデータ コンポーネントを接続するために
Fleet Engine とも連携しますJavaScript Shipment Tracking Library を使用し、
ウェブ アプリケーションから、カスタマイズ可能なアニメーション付きの配送追跡エクスペリエンスを提供できます。
コンポーネント
JavaScript Shipment Tracking Library は、可視化のためのコンポーネントを提供します。 元データとともに、目的地に向かう車両とルートの フィードを作成して、ドライバーの到着予定時刻や残りの走行距離を確認できます。
Shipment Tracking の地図表示
地図表示コンポーネントは、車両と目的地の位置を可視化します。 車両のルートがわかっている場合は、地図表示コンポーネントがアニメーション表示される 予測された経路に沿って移動すると予測されます。
配送先プロバイダ
配送場所プロバイダが追跡対象オブジェクトの位置情報をフィードする 配送追跡マップに組み込んで、ファースト ワンマイルとラスト ワンマイルの配送を追跡できます。
配送拠点のプロバイダを利用して、以下を追跡できます。
- 荷物の集荷場所または配達場所。
- 配達車両の位置と経路。
追跡対象の位置情報オブジェクト
位置情報プロバイダは、車両や位置情報などの物体の 構成できます
宛先のロケーション
目的地とは、旅程の終点となる場所のことです。配送用 予定されたタスクの場所です。
車両の位置情報
車両位置情報は、車両の追跡位置です。必要に応じて 車両のルートが含まれます。
認証トークン取得ツール
Fleet Engine に保存されている位置情報へのアクセスを制御するには、 Fleet Engine 用の JSON Web Token(JWT)作成サービスを実装する サーバー上にあります次に、認証トークン フェッチャーを実装します。 JavaScript Journey Sharing Library を使用して、ウェブ アプリケーションの 位置情報へのアクセスを認証します。
スタイル オプション
マーカーとポリラインのスタイルで、 追跡された位置情報オブジェクトを地図上に配置できます。次を使用: カスタム スタイル オプション。スタイルに合わせてデフォルトのスタイルを変更できます。 ウェブ アプリケーションの機能を提供します。
追跡中の場所の公開設定を管理します
このセクションでは、地図上に追跡されているオブジェクトの表示設定について説明します。 これらのルールは、次の 2 つのカテゴリのオブジェクトに適用されます。
- 位置マーカー
- タスクデータ
位置マーカーの公開設定
出発地と目的地の場所のマーカーはすべて、常に地図上に表示されます。 たとえば、配送場所を地図に常に表示して、 常に同じです
タスクデータの可視性
このセクションでは、タスクデータに適用されるデフォルトの公開設定ルールについて説明します。 車両の位置や残りのルートなどの情報を 表示できますカスタマイズできるタスクはたくさんありますが、 すべてではありません。
- 使用できないタスク -- これらのタスクの公開設定はカスタマイズできません。
- アクティブな車両タスク -- これらのタイプのタスクをカスタマイズできます。
- 非アクティブな車両タスク -- これらのタスクの公開設定はカスタマイズできません。
利用できないタスク
使用できないタスクが 1 つ以上ある場合(例: ルート上で運転手が休憩している場合や車両に給油中の場合) 車両は見えません。到着予定時刻 タスク完了までの時間と予測時間は、引き続き使用できます。
アクティブな車両タスク
「
TaskTrackingInfo
オブジェクトは、パイプライン内で表示可能な多くのデータ要素を提供します。
Shipment Tracking Library(配送追跡ライブラリ)デフォルトでは、タスクの実行時にこれらのフィールドが表示されます。
タスクの 5 駅以内の範囲に到着すると、車両に割り当てられ、「
タスクが完了またはキャンセルされると公開終了となります。フィールドは次のとおりです。
次のようになります。
- ポリラインをルーティングする
- 到着までの予想時間
- タスク完了までの予想時間
- タスクまでの残りの走行距離
- 残りの経由地数
- 車両の位置情報
タスクごとに公開設定をカスタマイズするには、
TaskTrackingViewConfig
Fleet Engine でタスクを作成または更新するときに指定できます。これにより、
個々のデータ要素が利用可能かどうかを指定するルールです。この条件は、
(以下では公開設定オプションと呼びます)
- 残りの経由地数
- 到着予定時刻までの時間
- 残りの走行距離
- 常に表示
- 非表示
各データ要素は、1 つの公開設定オプションにのみ関連付けることができます。 OR または AND を使用して条件を組み合わせることはできません。
カスタマイズの例を以下に示します。このカスタマイズのルールは次のとおりです。
- 車両が 3 つの駅 / 停留所内にある場合、ルートのポリラインを表示します。
- 残りの走行距離が 5,000 メートル未満の場合は、到着予定時刻が表示されます。
- 残りの経由地数を表示しない。
- 他の各フィールドは、デフォルトの表示状態を維持します。 タスクから 5 駅以内にあると判断できます。
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
プロジェクトのデフォルトの公開設定をカスタマイズすることもできます。 サポートチームにお問い合わせください。
ルートのポリラインと車両の位置の公開設定ルール:
ルートのポリラインを表示する場合は、車両の位置も表示できる必要があります。 それ以外の場合は、車両の位置をポリラインの端で示すことができます。 は、経路のポリラインに、それほど制限の緩い表示設定オプションを指定できないことを意味します。
有効な経路のポリラインまたは車両を指定するには、以下のルールに従う必要があります。 位置情報の公開設定の組み合わせ:
経路のポリラインと車両の場所の表示オプションが同じ場合 type:
- 公開設定オプションが [残りの停車地数]、[到着予定時刻までの時間]、または 残りの走行距離。ルートのポリラインには、 車両のこの公開設定オプションに設定された値以上 あります。次に例を示します。
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
- 経路のポリラインに常に表示設定オプションがある場合は、車両の位置、 常に表示される公開設定オプションも提供する必要があります。
- 車両の位置に可視性を非表示にするオプションがある場合は、ポリラインを経路設定する 非表示設定オプションも提供する必要があります
経路のポリラインと車両の位置表示オプションが異なる場合 車両の位置情報は、視認範囲の両方の場合のみ表示されます。 検証します。
次に例を示します。
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, }
この例では、車両の位置情報は、残りの停車地がある場合にのみ表示されます。 カウントが 3 以上かつ残りの走行距離が 3,000 以上 メートルです。
JavaScript Journey Sharing Library を使ってみる
JavaScript Journey 共有ライブラリを使用する前に、 Fleet Engine と API キーを取得します。
配送を追跡するには、まずトラッキング ID の申し立てを作成します。
トラッキング ID の申し立てを作成する
配送先プロバイダを使用して配送を追跡するには: トラッキング ID クレームを含む JSON Web Token(JWT)を作成する。
JWT ペイロードを作成するには、Authorization セクションにクレームを追加します。 キーは「trackingid」に置き換えます。値を配送追跡 ID に設定します。
次の例は、トラッキング ID によるトラッキング用のトークンを作成する方法を示しています。
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
"sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"trackingid": "tid_54321",
}
}
認証トークン フェッチャーを作成する
認証トークン フェッチャーを作成して、作成されたトークンを 使用してサーバー上の適切なクレームを記述 作成する必要があります。作成できるのはトークンのみ、 サーバーに保持し、クライアント間で証明書が共有されることはありません。それ以外の場合は システムのセキュリティが侵害されます。
フェッチャーはデータ構造を返す必要があります。 Promise でラップされた次の 2 つのフィールドで表されます。
- 文字列
token
。 - 数値
expiresInSeconds
。トークンは、次の時間内に期限切れとなります。 あります。
JavaScript Shipment Tracking Library は、認証によってトークンをリクエストします。 トークン フェッチャーは、次のいずれかに該当する場合に使用できます。
- 有効なトークンがない(フェッチャーを フェッチャーからトークンが返されなかった場合に返されるメッセージです。
- 以前に取得したトークンの有効期限が切れている。
- 以前に取得したトークンの有効期限が 1 分以内に切れている。
それ以外の場合、ライブラリは以前に発行された引き続き有効なトークンを使用し、 フェッチャーを呼び出さないでください。
次の例は、認証トークン フェッチャーを作成する方法を示しています。
JavaScript
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
TypeScript
function authTokenFetcher(options: {
serviceType: google.maps.journeySharing.FleetEngineServiceType,
context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
// The developer should generate the correct
// SERVER_TOKEN_URL based on options.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.token,
expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
};
}
トークン作成のためにサーバーサイドのエンドポイントを実装する場合、 次の点に留意してください
- エンドポイントはトークンの有効期限を返す必要があります。例で
上記では
data.ExpiresInSeconds
と指定されています。 - 認証トークン フェッチャーは、有効期限(秒単位、 フェッチの時点から)をライブラリに渡します。
- SERVER_TOKEN_URL はバックエンドの実装によって異なります。サンプルアプリ バックエンドの URL は次のとおりです。
<ph type="x-smartling-placeholder">
- </ph>
- https://
SERVER_URL
/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://
SERVER_URL
/token/delivery_consumer/TRACKING_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
HTML から地図を読み込む
次の例は、JavaScript 配送追跡を読み込む方法を示しています。
指定した URL のライブラリ。callback パラメータが initMap
を実行します。
API がロードされた後に送信されます。defer 属性を使用すると、ブラウザで
API の読み込み中にページの残りの部分のレンダリングを続行します。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
配送を追跡する
このセクションでは、JavaScript Shipment Tracking Library の使用方法について説明します。 荷物の集荷や配達のフォローも簡単にできます。必ず スクリプトタグで指定されたコールバック関数からライブラリを読み込む 確認する必要があります
配送先プロバイダをインスタンス化する
JavaScript Shipment Tracking Library は位置情報プロバイダを事前定義 Fleet Engine Deliveries API 用です。 プロジェクト ID とトークン ファクトリへの参照を使用して、トークン ファクトリをインスタンス化します。
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
マップビューを初期化する
JavaScript Journey Sharing ライブラリを読み込んだ後、 HTML ページに追加します。ページには 地図ビューを保持する <div> 要素。以下の例では、 <div> 要素の名前は <div> です。
競合状態を回避するには、位置情報プロバイダのトラッキング ID を設定してください 地図の初期化後に呼び出されるコールバックで指定できます。
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
トラッキング ID
位置情報プロバイダに提供されるトラッキング ID は、 タスクたとえば、同じ荷物の集荷と配達のタスクなどです。 配信の失敗が数回発生する。タスクが 1 つ選択されて 配送追跡マップ。表示されるタスクは次のように決定されます。
- 未解決の集荷タスクが 1 つだけの場合は、それが表示されます。エラーが発生する 複数の未完了の集荷タスクがある場合です
- 未完了の配信タスクが 1 つだけの場合は、そのタスクが表示されます。エラーとは 未完了の配信タスクが複数ある場合は 自動的に生成されます
- 終了した配信タスクがある場合:
<ph type="x-smartling-placeholder">
- </ph>
- 終了した配信タスクが 1 つだけの場合は、そのタスクが表示されます。
- 終了した配信タスクが複数ある場合は、最も新しいタスクが 表示されます。
- 終了したデリバリー タスクが複数あり、いずれも結果がない エラーが発生します。
- 終了した集荷タスクがある場合:
<ph type="x-smartling-placeholder">
- </ph>
- 終了した集荷タスクが 1 つだけの場合は、それが表示されます。
- 終了した集荷タスクが複数ある場合は、最も新しいものが表示されます。 表示されます。
- 終了した集荷タスクが複数ある場合、どのタスクにも結果がない エラーが発生します。
- それ以外の場合は、タスクは表示されません。
変更イベントをリッスンする
タスクに関するメタ情報は、タスク トラッキング情報から取得できます。 このオブジェクトは位置情報プロバイダを使ってメタ情報には到着予定時刻、 受け取りまたは配達までの残り所数、移動距離などを確認できます。 メタ情報が変更されると、update イベントがトリガーされます。次の例をご覧ください。 変更イベントをリッスンする方法を説明します
JavaScript
locationProvider.addListener('update', e => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
エラーを処理する
配送情報のリクエストから非同期に発生するエラーは、 error イベント。次の例は、これらのイベントをリッスンする方法を示しています。 エラーを処理する。
JavaScript
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
注: ライブラリ呼び出しは try...catch
ブロックでラップしてください。
予期しないエラーを処理できます。
トラッキングを停止
配送業者による荷物の追跡を停止するには、荷物追跡 ID を削除します 位置情報プロバイダから取得します
JavaScript
locationProvider.trackingId = '';
TypeScript
locationProvider.trackingId = '';
地図表示から位置情報プロバイダを削除する
次の例は、地図表示から位置情報プロバイダを削除する方法を示しています。
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
基本地図のデザインをカスタマイズする
地図コンポーネントのデザインをカスタマイズするには、 地図のスタイルを設定する またはコードでオプションを直接設定することもできます。
Cloud ベースのマップのスタイル設定を使用する
Cloud ベースのマップのスタイル設定
Google マップを使用するすべてのアプリについて、地図のスタイルを作成、編集できます
Google Cloud コンソールから利用できます。コードを変更する必要はありません。
地図のスタイルは、Cloud プロジェクトにマップ ID として保存されます。スタイルを適用するには
JavaScript Shipment Tracking Map で、
mapId
JourneySharingMapView
を作成するときに指定する必要があります。mapId
フィールドは変更できません
または JourneySharingMapView
がインスタンス化された後に追加されます。次の
は、以前に作成した地図のスタイルをマップ ID で有効にする方法を示しています。
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
コードベースの地図のスタイル設定を使用する
地図のスタイル設定をカスタマイズするもう一つの方法は、
mapOptions
:
JourneySharingMapView
を作成します。
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
マーカーのカスタマイズ機能を使用する
JavaScript Shipment Tracking Library を使用すると、外観をカスタマイズして、 地図に追加されたマーカーの感覚を体験できます。これを行うには、マーカーを 配送追跡ライブラリがそれらを適用して追加する前に マーカーが地図に追加され、マーカーが更新されるたびに更新されるようになります。
最も簡単なカスタマイズは、
MarkerOptions
同じタイプのすべてのマーカーに適用されるオブジェクトです。変更点
各マーカーが作成された後に適用されます。
デフォルトのオプションを上書きできます
より高度なオプションとして、カスタマイズ関数を指定できます。カスタマイズ データに基づくマーカーのスタイル設定や、 クリック処理など、マーカーに対するインタラクティブな操作を提供します。具体的には、配送 トラッキングにより、カスタマイズ関数に、指定したオブジェクトの マーカーは車両または目的地を表します。これにより、マーカーのスタイル設定が マーカー要素自体の現在の状態に基づいて変化します。たとえば 目的地までの予定されていた経由地数。Google Meet の Fleet Engine 外部のソースのデータと比較し、 できます。
配送追跡ライブラリには、次のカスタマイズ パラメータが用意されています。
FleetEngineShipmentLocationProviderOptions
:
MarkerOptions
を使用してマーカーのスタイルを変更する
次の例は、車両マーカーのスタイル設定を
MarkerOptions
オブジェクト。このパターンに沿って
上述のマーカーのカスタマイズ方法を使ってマーカーを作成できます。
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
カスタマイズ関数を使用してマーカーのスタイルを変更する
次の例は、車両マーカーのスタイル設定を設定する方法を示しています。フォロー 任意のマーカーを使用するマーカーのスタイルをカスタマイズするには、このパターンを使用します。 カスタマイズ パラメータを使用できます。
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.
});
}
};
ポリラインのカスタマイズを使用する
配送追跡ライブラリを使用すると、
地図上に配送ルートが表示されます。ライブラリは、
google.maps.Polyline
配送のアクティブな、または残りの座標の各ペアの
path です。
ポリラインのカスタマイズを指定することで、Polyline
オブジェクトのスタイルを設定できます。「
ライブラリはこれらのカスタマイズを 2 つの状況で適用します。
オブジェクトを地図に追加したり、オブジェクトのデータが変更されたりしたときに通知されます。
マーカーのカスタマイズと同様に、
PolylineOptions
作成時に一致するすべての Polyline
オブジェクトに適用
更新されます。
同様に、カスタマイズ関数を指定することもできます。カスタマイズ関数
Fleet Engine によって送信されたデータに基づくオブジェクトの個別のスタイル設定が可能です。
この関数は、オブジェクトの現在の状態に基づいて、各オブジェクトのスタイルを変更できます。
荷物。たとえば、Polyline
オブジェクトを濃い色合いに設定するなどです。
車の動きが遅いときは
厚くなります別のデータセットと結合することもできます。
Fleet Engine 外部のソースからエクスポートし、それに基づいて Polyline
オブジェクトのスタイルを設定します。
情報です。
以下のパラメータを使用してカスタマイズを指定できます。
FleetEngineShipmentLocationProviderOptions
。
さまざまな経路状態のカスタマイズは車両の
すでに旅行した / 積極的に 旅行している / まだ旅行していない「
パラメータは次のとおりです。
takenPolylineCustomization
移動済み経路の場合activePolylineCustomization
移動中の場合remainingPolylineCustomization
未知の経路を表示します
PolylineOptions
を使用して Polyline
オブジェクトのスタイルを変更する
次の例は、Polyline
オブジェクトのスタイル設定を設定する方法を示しています。
PolylineOptions
。
このパターンでは、任意の Polyline
オブジェクトのスタイルをカスタマイズします。
カスタマイズしたスタイルを使用します。
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
カスタマイズ関数を使用して Polyline
オブジェクトのスタイルを変更する
次の例は、アクティブな Polyline
オブジェクトを構成する方法を示しています。
カスタマイズします。このパターンに沿って、Polyline
オブジェクトのスタイルをカスタマイズします。
前述のポリラインのカスタマイズ パラメータを使って作成します。
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
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: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
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'});
}
}
};
Polyline
オブジェクトの公開設定を制御する
デフォルトでは、すべての Polyline
オブジェクトが表示されます。Polyline
オブジェクトを作成するには
非表示の場合は、その変数を
visible
プロパティ:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
車両または位置マーカーの InfoWindow
を表示する
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();
自動適合を無効にする
地図が自動的にビューポートを車両にフィットさせないようにすることができます 予測ルートと推定ルートが表示されます次の例をご覧ください。 ジャーニーの共有を設定する際に自動適合を無効にする方法を示します。 使用できます。
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
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();
既存の地図を置き換える
JavaScript Shipment Tracking Library を使用すると、 マーカーやその他のカスタマイズ要素を含む既存の地図 そのカスタマイズを維持できます
たとえば、標準の google.maps.Map
を含むウェブページがあるとします。
次の要素です。
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
JavaScript Journey 共有ライブラリを追加するには:
- 認証トークン ファクトリのコードを追加します。
initMap()
関数で位置情報プロバイダを初期化します。initMap()
関数でマップビューを初期化します。ビューには地図が含まれます。- カスタマイズをマップビューの初期化用のコールバック関数に移動します。
- 位置情報ライブラリを API ローダに追加します。
次の例は、行う変更を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider.
locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
locationProvider.trackingId = TRACKING_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
荷物追跡番号 指定した ID がウルルの付近にあれば、地図上にレンダリングされるようになります。