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

MarkerShape

MarkerShapeは、マーカーの、クリックやドラッグに反応する領域を調整するためのオブジェクトです。円、四角形、多角形の3種類の形をした領域をオブジェクトで指定できます。

プロパティ

プロパティ名説明
coords

Array<number>

マーカーの左上を基準(0,0)とした座標を配列で指定する。必要な座標の数は、typeで指定した種類によって違う。

"circle"の場合
[cx,cy, a]と、3つの座標を指定する。cxとcyは円の中心の位置座標で、aは円の半径を表す。
"poly"の場合
[x1,y1, x2,y2, ..., x99,y99]と多角形の角を示す座標を、角の数だけ指定する。
"rect"の場合
[x1,y1, x2,y2]と、2つの座標を指定する。1つ目の座標が四角形の左上、2つ目の座標が四角形の右下となる。
type

string

領域の種類。

"circle"
円。
"poly"
多角形。
"rect"
四角形。

デモ

MarkerShapeオブジェクトの役割をデモで確認できます。円、多角形、四角形、の3種類の領域を試してみて下さい。このデモの画像は50x50のサイズです。デフォルトだと、円の場合は25, 25を中心とした半径25の形の領域なので、マーカー画像の四隅だけ反応しません。多角形の場合だと画像の左上、右上、右下を結ぶ三角形の形なので、画像の右下半分が反応しません。同じように、四角形の場合だと下半分が反応しません。

var markerShape1 = {
	type: "circle" ,
	coords: [ 100,100, 100 ] ,
} ;

var markerShape2 = {
	type: "poly" ,
	coords: [ 0, 0, 200, 0, 0, 200 ] ,
} ;

var markerShape3 = {
	type: "rect" ,
	coords: [ 0, 0, 200, 100 ] ,
} ;

var marker = new google.maps.Marker( {
	map: map ,
	position: new google.maps.LatLng( 43.0611, 141.3564 ) ,
	icon: {
		url: "./marker.png" ,
		scaledSize: new google.maps.Size( 200, 200 ) ,
	} ,
	shape: markerShape1 ,
} ) ;

サンプルコード

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

// Marker
var markerShape1 = {
	type: "circle" ,
	coords: [ 100,100, 100 ] ,
} ;

var markerShape2 = {
	type: "poly" ,
	coords: [ 0, 0, 200, 0, 0, 200 ] ,
} ;

var markerShape3 = {
	type: "rect" ,
	coords: [ 0, 0, 200, 100 ] ,
} ;

var marker = new google.maps.Marker( {
	map: map ,
	position: map.getCenter() ,
	icon: {
		url: "./marker.png" ,
		scaledSize: new google.maps.Size( 200, 200 ) ,
	} ,
	shape: markerShape1 ,
} ) ;
	</script>
</body>
</html>

デモページを開く

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