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

Polygon

Polygonクラスはポリゴンを表示するためのクラスです。ポリゴンは、任意の数だけ指定した位置座標を結んで出来る多角形のことです。

構文

Polygon( opts?:PolygonOptions )

パラメータ

opts

PolygonOptions

ポリゴンのオプションとなるオブジェクト。ポリゴンの各角となる位置座標、有効な操作など指定できる。パスを一次元配列で指定した場合は1つの多角形を設置できる。二次元配列で指定した場合、1つのインスタンスで任意の数だけ多角形を設置できる。この特徴を覚えておかないと、混乱するかもしれません。

// 一次元配列の場合 (1つのポリゴンを作る)
var Paths = [
	位置座標 ,
	位置座標 ,
	... ,
] ;

// 二次元配列の場合 (複数のポリゴンを作る)
var Paths = [
	// 1つ目のポリゴン
	[
		位置座標 ,
		位置座標 ,
		... ,
	] ,
	// 2つ目のポリゴン
	[
		位置座標 ,
		位置座標 ,
		... ,
	] ,
	... ,
] ;

返り値

Polygon

Polygonクラスのインスタンス。このインスタンスにメソッドを実行したりイベントを設定してポリゴンを操作できる。

デモ

ポリゴンを作成するデモです。このデモでは、一次元配列でパスを指定しているため、1つの多角形をレンダリングしています。その他の設定項目については、PolygonOptionsオブジェクトをご参考下さい。

var polygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		new google.maps.LatLng( 32.3738, 131.1350 ) ,
		new google.maps.LatLng( 35.7406, 139.9241 ) ,
		new google.maps.LatLng( 43.0475, 141.9016 ) ,
		new google.maps.LatLng( 35.4547, 133.3762 ) ,
	] ,
} ) ;

サンプルコード

インスタンスの作成

var polygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		new google.maps.LatLng( 32.3738, 131.1350 ) ,
		new google.maps.LatLng( 35.7406, 139.9241 ) ,
		new google.maps.LatLng( 43.0475, 141.9016 ) ,
		new google.maps.LatLng( 35.4547, 133.3762 ) ,
	] ,
} ) ;

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 ,
} ) ;

// Polygon
var polygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		new google.maps.LatLng( 32.3738, 131.1350 ) ,
		new google.maps.LatLng( 35.7406, 139.9241 ) ,
		new google.maps.LatLng( 43.0475, 141.9016 ) ,
		new google.maps.LatLng( 35.4547, 133.3762 ) ,
	] ,
} ) ;

// fit bounds
var latLngBounds = new google.maps.LatLngBounds() ;

polygon.getPaths().forEach( function ( latLngs ) {
	latLngs.forEach( function ( latLng ) {
		latLngBounds.extend( latLng ) ;
	} ) ;
} ) ;

map.fitBounds( latLngBounds ) ;
	</script>
</body>
</html>

デモページを開く

オプション

PolygonOptionsに指定できるプロパティの一覧です。

名前説明
clickableポリゴンをクリックできるか否かを調整する。
draggableポリゴンをドラッグ操作できるか否かを調整する。
editableポリゴンを編集できるか否かを調整する。
fillColorポリゴンの塗りつぶしの色を調整する。
fillOpacityポリゴンの塗りつぶしの色を調整する。
geodesicポリゴンを測地線に対応させるか否かを調整する。
mapポリゴンを設置する地図を指定する。
pathsポリゴンの各角となる位置座標を指定する。
strokeColorポリゴンの線の色を調整する。
strokeOpacityポリゴンの線の不透明度を調整する。
strokePositionポリゴンの線の位置を調整する。
strokeWeightポリゴンの線の太さを調整する。
visibleポリゴンの表示状態を調整する。
zIndexポリゴンのz-orderを調整する。

メソッド

名前説明
getDraggable()ポリゴンがドラッグ操作できるか否かを取得する。
getEditable()ポリゴンが編集できるか否かを取得する。
getMap()ポリゴンが設置されている地図を取得する。
getPath()ポリゴンの一次元配列のパスを取得する。
getPaths()ポリゴンの二次元配列のパスを取得する。
getVisible()ポリゴンの表示状態を取得する。
setDraggable()ポリゴンのドラッグ操作の有効、無効をセットする。
setEditable()ポリゴンの編集の有効、無効をセットする。
setMap()ポリゴンを地図に設置する。または地図から取り除く。
setOptions()ポリゴンの各種設定をセットする。
setPath()ポリゴンに一次元配列のパスをセットする。
setPaths()ポリゴンに二次元配列のパスをセットする。
setVisible()ポリゴンの表示状態をセットする。

イベント

名前説明
clickポリゴン上でクリックした時に発火するイベント。
dblclickポリゴン上でダブルクリックした時に発火するイベント。
dragポリゴンをドラッグ操作で動かしている時に発火するイベント。
dragendポリゴンのドラッグ操作を完了した時に発火するイベント。
dragstartポリゴンのドラッグ操作を開始した時に発火するイベント。
mousedownポリゴン上でマウスボタンを押した時に発火するイベント。
mousemove ポリゴン上でマウスポインタを動かしている時に発火するイベント。
mouseoutポリゴン上からマウスポインタを出した時に発火するイベント。
mouseoverポリゴン上にマウスポインタを乗せた時に発火するイベント。
mouseupポリゴン上でマウスボタンを離した時に発火するイベント。
rightclickポリゴン上で右クリックした時に発火するイベント。
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2015年9月1日 (火)
コンテンツを公開しました。