AngularJSを使ってGoogleマップ(8)経由地を指定して徒歩ルートを表示する

前回はルートサービスを使って出発地と目的地の2地点間の徒歩ルートを表示しました。今回は、経由地も複数選択できるようにし、散策ルートなどを表示できるようにしました。

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

サンプルコードの内容


 
1)経由地を設定(スクリプト)
 
Selectタグで入力された経由地を取得して配列に設定します。経由地は位置情報だけでなく、stopover属性も指定します。この属性は、この経由地が実際の停止地点であるのか(true)、経由を希望しているだけなのか(false)を指定します。

var ways = [];
for (var i = 0; i < routePoints.ways.length; i++) {
  ways.push({
    location:routePoints.ways[i].latlng,
    stopover:true
  });
};

 
2)ルート計算の条件を設定
 
前回の設定に1)の経由地の属性を指定します。

var request = {
  origin: start,
  destination: end,
  waypoints: ways,
  optimizeWaypoints: true,
  travelMode: google.maps.TravelMode.WALKING
};

上記以外は前回と同様です。

関連記事の目次

コメントを残す

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