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

Polygon: zIndex

zIndexはPolygonクラスのオプションです。ポリゴンのz-orderを調整します。z-orderが高いほど、他のポリゴンと重なった時に手前に表示されます。

number

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

var opts = {
	zIndex: 2 ,
} ;

デモ

zIndexを指定したデモです。赤色のポリゴンには2、青色のポリゴンには1のz-orderを設定しました。従って、青色のポリゴンの方が手前に表示されています。

var leftPolygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		new google.maps.LatLng( 35.71024591620525, 139.80850058860779 ) ,
		new google.maps.LatLng( 35.71085572526387, 139.81307107276916 ) ,
		new google.maps.LatLng( 35.7099061634198, 139.8132749206543 ) ,
		new google.maps.LatLng( 35.70949671583129, 139.80853277511596 ) ,
	] ,
	fillColor: "red" ,
	fillOpacity: 1 ,
	zIndex: 2 ,
} ) ;

var rightPolygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		new google.maps.LatLng( 35.71145681819755, 139.81026011772155 ) ,
		new google.maps.LatLng( 35.70859069666899, 139.8102493888855 ) ,
		new google.maps.LatLng( 35.70887818463365, 139.8121054775238 ) ,
		new google.maps.LatLng( 35.71142197235412, 139.8118372566223 ) ,
	] ,
	fillColor: "blue" ,
	fillOpacity: 1 ,
	zIndex: 1 ,
} ) ;

サンプルコード

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

// Polygon
var leftPolygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		new google.maps.LatLng( 35.71024591620525, 139.80850058860779 ) ,
		new google.maps.LatLng( 35.71085572526387, 139.81307107276916 ) ,
		new google.maps.LatLng( 35.7099061634198, 139.8132749206543 ) ,
		new google.maps.LatLng( 35.70949671583129, 139.80853277511596 ) ,
	] ,
	fillColor: "red" ,
	fillOpacity: 1 ,
	zIndex: 2 ,
} ) ;

var rightPolygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		new google.maps.LatLng( 35.71145681819755, 139.81026011772155 ) ,
		new google.maps.LatLng( 35.70859069666899, 139.8102493888855 ) ,
		new google.maps.LatLng( 35.70887818463365, 139.8121054775238 ) ,
		new google.maps.LatLng( 35.71142197235412, 139.8118372566223 ) ,
	] ,
	fillColor: "blue" ,
	fillOpacity: 1 ,
	zIndex: 1 ,
} ) ;

// fit bounds
for( var a=[ leftPolygon, rightPolygon ],i=a.length; i--; ) {
	var LatLngBounds = new google.maps.LatLngBounds() ;

	a[i].getPaths().forEach( function ( LatLngs ) {
		LatLngs.forEach( function ( LatLng ) {
			LatLngBounds.extend( LatLng ) ;
		} ) ;
	} ) ;

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

デモページを開く

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