AngularJSを使ってGoogleマップ(10)ドラッグ可能なルートを表示し、結果をテキストでも表示

表示したルートをドラッグして変更できるようにし、ルートを変更すると計算結果のテキスト表示も更新させるサンプルコードを作成しました。

デモとコードサンプルはこちら
 

サンプルコードの内容


 
1)DirectionsRendererオブジェクトにドラッグ可能のオプションを指定
 

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

 
2)ルート計算関数(calcRoute)内に’directions_changed’のイベントリスナー登録
 
表示済みルートをドラッグした際、テキストで表示した各ルートの距離表示を更新させるため、DirectionsRendererオブジェクトのdirections_changedイベントをモニタリングするリスナーを登録します。
 

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  computeTotalDistance(directionsDisplay.getDirections());
});

 
3)ルートドラッグ時にルートの距離を計算する関数を作成
 
上記2)のリスナーで登録したcomputeTotalDistance関数を定義します。
 
AngularJS、Googleマップの他の記事の目次

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください