ポリラインを使って地図上にラインを表示するサンプルコードを作成しました。
(1)サンプルコード
デモ表示へ
(2)サンプルコードの内容
1)ポリラインの設定
Polylineオブジェクトを使って、ラインを定義します。
PolylineオブジェクトはLatLng配列で構成され、LatLng配列内の位置を順番に接続して連続した線セグメントを作成します。
①スクリプト内でポリラインの属性を設定
path ラインを構成するポイント(緯度・経度)の配列
stroke ラインの属性を設定
Color 線の色
Opacity 線の色の不透明度
Weight 線の太さ
draggable 線を地図の範囲を超えてドラッグできるか
editable 線をdraggingポイントで変更できるか
②HTML内でpolylineディレクティブを使ってポリラインを表示する。
2)projection_changedイベント
地図が表示される際に一度発行されるprojection_changedイベントを使って上記ポリラインを設定します。
AngularJS、Googleマップの他の記事の目次