- GoogleMap
- 2016-03-28 - 更新:2016-03-30
この記事は最終更新日から1年以上経過しています。
GoogleMap上に円を描く方法をご紹介します。
CircleOptionsクラス
var myCircleOptions = { center: null, // 中心の座標 clickable: true, // クリックの可否(デフォルトtrue) draggable: false, // ドラッグの可否(デフォルトfalse) editable: false, // 編集の可否(デフォルトfalse) fillColor: "#ffffff", // 塗り潰しの色 fillOpacity: 0.7, // 塗り潰しの不透明度 0.0~1.0 map: map, // GoogleMapのインスタンス radius: 0, // 半径(単位:m) strokeColor: "#6090ff", // 線の色 strokeOpacity: 0.9, // 線の不透明度 0.0~1.0 strokePosition: google.maps.StrokePosition.CENTER, // 線の位置(CENTER|INSIDE|OUTSIDE) strokeWeight: 3, // 線の太さ(単位:ピクセル) visible: true, // 表示の有無(デフォルトtrue) zIndex: 1 // 重なり順 }
設定したオプションを利用してサークルオブジェクトを作成します。
myCircle = new google.maps.Circle(myCircleOptions);
マップを後から設定する場合は
myCircle.setMap(map);
公式リファレンスはこちらから
https://developers.google.com/maps/documentation/javascript/reference#Circle
4,663 views