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

wp-admin

6年前

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

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

サンプルコードの内容

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

var ways = [];
for (var i = 0; i 
　

２）ルート計算の条件を設定

　

前回の設定に１）の経由地の属性を指定します。
var request = {
  origin: start,
  destination: end,
  waypoints: ways,
  optimizeWaypoints: true,
  travelMode: google.maps.TravelMode.WALKING
};

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