VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

AngularJSを使ってGoogleマップ(24)地図上にラインを表示

ポリラインを使って地図上にラインを表示するサンプルコードを作成しました。

(1)サンプルコード


 
デモ表示へ
 

(2)サンプルコードの内容


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