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

wp-admin

7年前

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

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

サンプルコードの内容

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

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

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

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

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