SYNCERのロゴ
アイキャッチ画像

RectangleOptions

RectangleOptionsは、レクタングルの設定を調整するためのオブジェクトです。レクタングルを作成する時のRectangleクラスの引数などに利用できます。

プロパティ

プロパティ名説明
bounds

LatLngBounds|LatLngBoundsLiteral

境界を表すLatLngBoundsクラスのインスタンス、またはLatLngLiteralオブジェクトで指定する。

clickable

boolean

trueならクリックが有効、falseなら無効になる。

draggable

boolean

trueならドラッグ操作が有効、falseなら無効になる。

editable

boolean

trueなら編集が有効、falseなら無効になる。

fillColor

string

スタイルシートと同じ方法で、色を文字列で指定する。

fillOpacity

number

スタイルシートと同じ方法で、不透明度を数値で指定する。

map

Map

地図を表すMapクラスのインスタンスを作成する。

strokeColor

string

スタイルシートと同じ方法で、色を文字列で指定する。

strokeOpacity

number

スタイルシートと同じ方法で、不透明度を数値で指定する。

strokePosition

StrokePosition

線の位置の種類を表すStrokePosition定数を指定する。

strokeWeight

number

ピクセル単位の数値で太さを指定する。

visible

boolean

trueなら表示状態、falseなら非表示状態になる。

zIndex

number

z-orderを表す数値を指定する。

デモ

RectangleOptionsオブジェクトを利用して、レクタングルを作成するデモです。各プロパティの値を調整して、レクタングルにどのように反映されるのかを確認してみて下さい。

var options = {
	map: map ,
	bounds: new google.maps.LatLngBounds(
		new google.maps.LatLng( 31.6868, 131.2624 ) ,
		new google.maps.LatLng( 35.4353, 135.7123 )
	) ,
	clickable: false ,
	draggable: true ,
	editable: true ,
	fillColor: "red" ,
	fillOpacity: 0.5 ,
	strokeColor: "purple" ,
	strokeOpacity: 0.5 ,
	strokePosition: google.maps.StrokePosition.INSIDE ,
	strokeWeight: 20 ,
	visible: false ,
} ;

var rectangle = new google.maps.Rectangle( options ) ;

サンプルコード

<!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, 139 ) ,
	zoom: 18 ,
} ) ;

// Rectangle
var options = {
	map: map ,
	bounds: new google.maps.LatLngBounds(
		new google.maps.LatLng( 31.6868, 131.2624 ) ,
		new google.maps.LatLng( 35.4353, 135.7123 )
	) ,
	clickable: false ,
	draggable: true ,
	editable: true ,
	fillColor: "red" ,
	fillOpacity: 0.5 ,
	strokeColor: "purple" ,
	strokeOpacity: 0.5 ,
	strokePosition: google.maps.StrokePosition.INSIDE ,
	strokeWeight: 20 ,
//	visible: false ,
} ;

var rectangle = new google.maps.Rectangle( options ) ;

// fit bounds
map.fitBounds( rectangle.getBounds() ) ;
	</script>
</body>
</html>

デモページを開く

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2015年9月1日 (火)
コンテンツを公開しました。