Polyline

2015/09/01

Polylineクラスはポリラインを表示するためのクラスです。ポリラインは、任意の数だけ指定した位置座標を結ぶ線です。

構文

Polyline( opts?:PolylineOptions )

パラメータ

opts

PolylineOptions

ポリラインのオプションとなるオブジェクト。ポリラインが通る位置座標や、線の色などを調整できる。

返り値

Polyline

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

デモ

ポリラインを作成するデモです。位置座標を調整してみて下さい。その他の設定項目については、PolylineOptionsオブジェクトをご参考下さい。

var polyline = new google.maps.Polyline( {
	map: map ,
	path: [
		new google.maps.LatLng( 32.3738, 131.1350 ) ,
		new google.maps.LatLng( 35.7406, 139.9241 ) ,
	] ,
} ) ;

サンプルコード

インスタンスの作成

var polyline = new google.maps.Polyline( {
	map: map ,
	path: [
		new google.maps.LatLng( 32.3738, 131.1350 ) ,
		new google.maps.LatLng( 35.7406, 139.9241 ) ,
	] ,
} ) ;

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

// Polyline
var polyline = new google.maps.Polyline( {
	map: map ,
	path: [
		new google.maps.LatLng( 32.3738, 131.1350 ) ,
		new google.maps.LatLng( 35.7406, 139.9241 ) ,
	] ,
} ) ;

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

polyline.getPath().forEach( function ( latLng ) {
	latLngBounds.extend( latLng ) ;
} ) ;

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

デモページを開く

オプション

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

名前	説明
clickable	ポリラインをクリックできるか否かを調整する。
draggable	ポリラインをドラッグ操作できるか否かを調整する。
editable	ポリラインを編集できるか否かを調整する。
geodesic	ポリラインを測地線に対応させるか否かを調整する。
icons	ポリラインに乗せるアイコンを調整する。
map	ポリラインを設置する地図を調整する。
path	ポリラインのパスを調整する。
strokeColor	ポリラインの線の色を調整する。
strokeOpacity	ポリラインの線の不透明度を調整する。
strokeWeight	ポリラインの線の太さを調整する。
visible	ポリラインの表示状態を調整する。
zIndex	ポリラインのz-orderを調整する。

メソッド

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

イベント

名前	説明
click	ポリラインをクリックした時に発火するイベント。
dblclick	ポリラインをダブルクリックした時に発火するイベント。
drag	ポリラインをドラッグ操作している時に発火するイベント。
dragend	ポリラインのドラッグ操作を完了した時に発火するイベント。
dragstart	ポリラインのドラッグ操作を開始した時に発火するイベント。
mousedown	ポリライン上でマウスボタンを押した時に発火するイベント。
mousemove	ポリライン上でマウスポインタを動かしている時に発火するイベント。
mouseout	ポリライン上からマウスポインタを出した時に発火するイベント。
mouseover	ポリライン上にマウスポインタを乗せた時に発火するイベント。
mouseup	ポリライン上でマウスボタンを離した時に発火するイベント。
rightclick	ポリライン上で右クリックした時に発火するイベント。

参考

Google Maps JavaScript API: Polyline: Googleの公式リファレンス。