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

StrokePosition

StrokePositionは、ポリゴンやレクタングルの、線の位置を表す定数です。google.maps.StrokePosition.{NAME}という形で指定できます。

定数

名前説明
CENTER線は中央に寄せられる。0
INSIDE線は内側に寄せられる。1
OUTSIDE線は外側に寄せられる。2

デモ

var opts = {
	map: map ,
	paths: [
		new google.maps.LatLng( 35.71130001178331 , 139.80993825263977 ) ,
		new google.maps.LatLng( 35.71065535994499 , 139.8088117248535 ) ,
		new google.maps.LatLng( 35.709174383271474 , 139.8088439113617 ) ,
		new google.maps.LatLng( 35.70886947289342 , 139.8107751018524 ) ,
		new google.maps.LatLng( 35.710097819014884 , 139.81207329101562 ) ,
		new google.maps.LatLng( 35.70939217568423 , 139.81357532806396 ) ,
		new google.maps.LatLng( 35.711639758625964 , 139.8128994113922 ) ,
		new google.maps.LatLng( 35.71099510953576 , 139.81208401985168 ) ,
	] ,
	strokePosition: google.maps.StrokePosition.INSIDE ,
	strokeWeight: 24 ,
} ;

var polygon = new google.maps.Polygon( opts ) ;

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

polygon.getPaths().forEach( function ( LatLngs ) {
	LatLngs.forEach( function ( LatLng ) {
		LatLngBounds.extend( LatLng ) ;
	} ) ;
} ) ;

map.fitBounds( LatLngBounds ) ;

サンプルコード

<!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>
// Map
var mapDiv = document.getElementById( "map-canvas" ) ;

var mapOpts = {
	center: new google.maps.LatLng( 35, 139 ) ,
	zoom: 11 ,
} ;

var map = new google.maps.Map( mapDiv, mapOpts ) ;

// Polygon
var polygonOpts = {
	map: map ,
	paths: [
		new google.maps.LatLng( 35.71130001178331 , 139.80993825263977 ) ,
		new google.maps.LatLng( 35.71065535994499 , 139.8088117248535 ) ,
		new google.maps.LatLng( 35.709174383271474 , 139.8088439113617 ) ,
		new google.maps.LatLng( 35.70886947289342 , 139.8107751018524 ) ,
		new google.maps.LatLng( 35.710097819014884 , 139.81207329101562 ) ,
		new google.maps.LatLng( 35.70939217568423 , 139.81357532806396 ) ,
		new google.maps.LatLng( 35.711639758625964 , 139.8128994113922 ) ,
		new google.maps.LatLng( 35.71099510953576 , 139.81208401985168 ) ,
	] ,
	strokePosition: google.maps.StrokePosition.INSIDE ,
	strokeWeight: 24 ,
} ;

var polygon = new google.maps.Polygon( polygonOpts ) ;

// 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>

デモページを開く

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