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

PolyMouseEvent

PolyMouseEventは、ポリライン、またはポリゴンの編集点をクリックした時などのイベントで、コールバック関数に引数で渡されるオブジェクトです。

プロパティ

プロパティ名説明
edge

number

ポリライン、またはポリゴンの何個目の編集点か。この編集点は、角を新たに増やすための編集点を指す。

latLng

LatLng

クリックした場所の位置座標。

path

number

ポリゴンを二次元配列で複数用意した場合、二次元配列の何個目の要素のポリゴンか。

vertex

number

ポリライン、またはポリゴンの何個目の編集点か。この編集点は、既存の位置座標にある編集点を指す。

メソッド

メソッド名説明
stop()実行すると、イベントの伝播をそこで止める。JavaScriptのevent.stopPropagation()と同じ。返り値はない。

デモ

編集できるポリゴンを、二次元配列を使って2つ用意しました。編集点をクリックしてみて下さい。編集点に関する情報を含んだPolyMouseEventオブジェクトを引数で取得できます。

polygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		[
			new google.maps.LatLng( 36.5621, 136.6626 ) ,
			new google.maps.LatLng( 36.5521, 136.6626 ) ,
			new google.maps.LatLng( 36.5521, 136.6726 ) ,
			new google.maps.LatLng( 36.5621, 136.6726 ) ,
		] ,
		[
			new google.maps.LatLng( 36.5633, 136.6583 ) ,
			new google.maps.LatLng( 36.5507, 136.6575 ) ,
			new google.maps.LatLng( 36.5545, 136.6485 ) ,
		] ,
	] ,
	editable: true ,
} ) ;

// Event
polygon.addListener( "click", function ( argument ) {
	console.log( argument ) ;
} ) ;

サンプルコード

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>
	<p><textarea id="argument"></textarea></p>

	<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( 36.56456479573554, 136.66303396224976 ) ,
	zoom: 18 ,
} ) ;

// Polygon
polygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		[
			new google.maps.LatLng( 36.5621, 136.6626 ) ,
			new google.maps.LatLng( 36.5521, 136.6626 ) ,
			new google.maps.LatLng( 36.5521, 136.6726 ) ,
			new google.maps.LatLng( 36.5621, 136.6726 ) ,
		] ,
		[
			new google.maps.LatLng( 36.5633, 136.6583 ) ,
			new google.maps.LatLng( 36.5507, 136.6575 ) ,
			new google.maps.LatLng( 36.5545, 136.6485 ) ,
		] ,
	] ,
	editable: true ,
} ) ;

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

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

map.fitBounds( latLngBounds ) ;

// Event
var argumentElement = document.getElementById( "argument" ) ;

polygon.addListener( "click", function ( argument ) {
	argumentElement.value = typeof argument == "object" ? JSON.stringify( argument ) : argument ;
	console.log( argument ) ;
} ) ;
	</script>
</body>
</html>

デモページを開く

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