スケジュール タスク用に JavaScript Consumer SDK を設定したので、次は 出荷後にユーザーアプリを使用する準備が整いましたこのドキュメントでは、 このプロセスの主なステップは次のとおりです。
- 地図を初期化して共通の経路を表示する
- ジャーニーの進行状況を更新して確認する
- 移動経路の共有を停止
- エラーを処理する
地図をセットアップする
ウェブアプリで受け取りまたは宅配を追跡するには、地図を読み込む必要があります Consumer SDK をインスタンス化し、配送の追跡を開始します。ファイルを読み込む 新しい地図か既存の地図を使うことができます次に、初期化コマンドを使用して 関数を使用して Consumer SDK をインスタンス化し、マップビューが トラッキング対象の商品アイテムの位置。
Google Maps JavaScript API を使用して新しい地図を読み込む
新しい地図を作成するには、ウェブアプリで Google Maps JavaScript API を読み込みます。「 次の例は、Google Maps JavaScript API を読み込んで 初期化チェックをトリガーします。
callbackパラメータは、API の読み込み後にinitMap関数を実行します。defer属性を使用すると、ブラウザは残りの部分のレンダリングを続行できます。 表示されます。
initMap 関数を使用して、Consumer SDK をインスタンス化します。例:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
既存の地図を読み込む
また、Google Maps JavaScript API で作成した既存の地図を読み込むこともできます。 変更することもできます
たとえば、標準の google.maps.Map を含むウェブページがあるとします。
次の HTML コードで定義されているとおり、マーカーが表示されるエンティティです。この
最後のコールバックで同じ initMap 関数を使用して、地図を表示します。
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* 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>
配送先プロバイダをインスタンス化する
配送先プロバイダを認証トークンと併せて使用する Fleet Engine からデータの受信を開始します。
次の例は、位置情報プロバイダをインスタンス化する方法を示しています。
JavaScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
TypeScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
共通のジャーニーを表示する
共有経路を地図に表示するには、その経路を ビューです。これにより、地図自体のフレームが撮影場所に対応する カスタマー SDK が顧客 SDK から情報を取得した後、 Fleet Engine
ヒント:
ページに地図ビューを保持する <div> 要素が含まれていることを確認します。 以下の例で、<div> 要素の名前は
map_canvasです。Fleet Engine によって追跡対象に適用されるデフォルトの公開設定ルールに注意 取り組みます。アクティブな車両の公開設定ルールを設定することもできます スケジュール設定された停止タスク詳しくは、タスクの公開設定のカスタマイズをご覧ください。 タスク構成ガイド。
以下の例は、マップビューを初期化する方法を示しています。
JavaScript
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// Any undefined styling options use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// 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 starts 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);
}
配送状況を更新する
イベントをリッスンし、配送の進行状況をジャーニーとして更新できる
学習します位置情報プロバイダを使用して、
taskTrackingInfo オブジェクト。メタの変更
情報によって update イベントがトリガーされます。taskTrackingInfo オブジェクトは、
次のとおりです。
- ETA
- 残りの経由地数
- 受け取りまたは宅配までの残り距離
次の例は、これらの変更イベントをリッスンする方法を示しています。
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);
});
複数のタスクの表示条件
スケジュール設定されたタスク用の Consumer SDK では、トラッキング ID ごとに 1 つのタスクのみが表示されます。 表示されます。ただし、通常は特定のコンバージョンに 1 つのトラッキング ID を shipment good（配送商品）は、配送プロセス全体を通じて商品に関連付けられたままになります。 確認できます。つまり、1 つのトラッキング ID が 集荷タスクの後に同じ商品の配達タスクが続くといった、複数のタスクが 1 つの荷物の複数の発送タスクに失敗した 場合もあります
このような状況に対処するために、Fleet Engine はタスクの表示条件を適用します。 表します
| タスクの条件 | 結果 |
|---|---|
| 受け取りタスクを開く | |
| 1 つだけ存在する | タスクを表示する |
| 複数存在する | エラーを生成 |
| Closed pickup Tasks | |
| 1 つだけ存在する | タスクを表示する |
| 複数存在する（一部は結果時刻あり） | 最新の結果時刻でタスクを表示 |
| 複数存在（結果時刻の指定なし） | エラーを生成 |
| 配信タスクを開く | |
| 1 つだけ存在する | タスクを表示する |
| 複数存在する | エラーを生成 |
| 終了した配信タスク | |
| 1 つだけ存在する | タスクを表示する |
| 複数存在する（一部は結果時刻あり） | 最新の結果時刻でタスクを表示 |
| 複数存在（結果時刻の指定なし） | エラーを生成 |
配送のフォローをやめる
配送プロセスが完了したかキャンセルされると、一般ユーザー向けアプリは トラッキング ID と位置情報プロバイダを アクセスできます。
トラッキング ID を削除する
配送業者による荷物の追跡を停止するには、荷物追跡 ID を削除します 位置情報プロバイダから取得します次の例は、これを行う方法を示しています。
JavaScript
locationProvider.trackingId = '';
TypeScript
locationProvider.trackingId = '';
地図表示から位置情報プロバイダを削除する
次の例は、地図表示から位置情報プロバイダを削除する方法を示しています。
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
配送追跡エラーを処理する
配送情報のリクエストから非同期に発生するエラーは、 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 ブロックでラップしてください。
予期しないエラーを処理できます。