Circle
Circleクラスは円を表示するためのクラスです。
構文
パラメータ
opts
円のオプションとなるオブジェクト。円は中心の位置座標と半径で、形が作られます。
返り値
Circle
Circleクラスのインスタンス。このインスタンスにメソッドを実行したりイベントを設定して円を操作できる。
デモ
円を作成するデモです。値を変更して、どのように反映されるか試してみて下さい。その他の設定項目については、CircleOptionsオブジェクトをご参考下さい。
var circle = new google.maps.Circle( {
map: map ,
center: new google.maps.LatLng( 35.71, 139.8107 ) ,
radius: 800 ,
} ) ;
サンプルコード
インスタンスの作成
var circle = new google.maps.Circle( {
map: map ,
center: new google.maps.LatLng( 35.71, 139.8107 ) ,
radius: 800 ,
} ) ;
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 600px ;
height: 600px ;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
<script>
var mapDiv = document.getElementById( "map-canvas" ) ;
// Map
var map = new google.maps.Map( mapDiv, {
center: new google.maps.LatLng( 35.71, 139.8107 ) ,
zoom: 11 ,
} ) ;
// Circle
var circle = new google.maps.Circle( {
map: map ,
center: new google.maps.LatLng( 35.71, 139.8107 ) ,
radius: 800 ,
} ) ;
// fit bounds
map.fitBounds( circle.getBounds() ) ;
</script>
</body>
</html>
オプション
CircleOptionsに指定できるプロパティの一覧です。
名前 | 説明 |
---|---|
center | 円の中心の位置座標を調整する。 |
clickable | 円のクリックの有効、無効を調整する。 |
draggable | 円のドラッグ操作の有効、無効を調整する。 |
editable | 円の編集の有効、無効を調整する。 |
fillColor | 円の塗りつぶしの色を調整する。 |
fillOpacity | 円の塗りつぶしの不透明度を調整する。 |
map | 円を設置する地図を指定する。 |
radius | 円の半径を調整する。 |
strokeColor | 円の線の色を調整する。 |
strokeOpacity | 円の線の不透明度を調整する。 |
strokePosition | 円の線の位置を調整する。 |
strokeWeight | 円の線の太さを調整する。 |
visible | 円の表示状態を調整する。 |
zIndex | 円のz-orderを調整する。 |
メソッド
名前 | 説明 |
---|---|
getBounds() | 円を取り囲める最小の境界(Bounding box)を取得する。 |
getCenter() | 円の中心の位置座標を取得する。 |
getDraggable() | 円のドラッグ操作の有効、無効を取得する。 |
getEditable() | 円の編集の有効、無効を取得する。 |
getMap() | 円が設置されている地図を取得する。 |
getRadius() | 円の半径を取得する。 |
getVisible() | 円の表示状態を取得する。 |
setCenter() | 円の中心の位置座標をセットする。 |
setDraggable() | 円のドラッグ操作の有効、無効をセットする。 |
setEditable() | 円の編集の有効、無効をセットする。 |
setMap() | 円を地図に設置する。または地図から取り除く。 |
setOptions() | 円の各種設定をセットする。 |
setRadius() | 円の半径をセットする。 |
setVisible() | 円の表示状態をセットする。 |
イベント
名前 | 説明 |
---|---|
center_changed | 円の中心の位置座標が変化した時に発火するイベント。 |
click | 円をクリックした時に発火するイベント。 |
dblclick | 円をダブルクリックした時に発火するイベント。 |
drag | 円をドラッグ操作で動かしている時に発火するイベント。 |
dragend | 円のドラッグ操作を完了した時に発火するイベント。 |
dragstart | 円のドラッグ操作を開始した時に発火するイベント。 |
mousedown | 円上でマウスボタンを押した時に発火するイベント。 |
mousemove | 円上でマウスポインタを動かしている時に発火するイベント。 |
mouseout | 円上からマウスポインタを出した時に発火するイベント。 |
mouseover | 円上にマウスポインタを乗せた時に発火するイベント。 |
mouseup | 円上でマウスボタンを離した時に発火するイベント。 |
radius_changed | 円の半径が変化した時に発火するイベント。 |
rightclick | 円を右クリックした時に発火するイベント。 |
参考
- Google Maps JavaScript API: Circle
- Googleの公式リファレンス。