JavaScript版地図

リファレンス

Version 1 ｜ Version 2

JavaScript版地図APIで使用可能なクラスやメソッドを説明します。

一覧表

YahooMapsCtrlクラス

コンストラクタ		YahooMapsCtrl(id, pos, layer, mode, datum) YahooMapsCtrl(element, pos, layer, mode, datum)
メソッド	地図の操作	homeTo() / zoomIn() / zoomOut() / changeMode() moveTo() / layerTo() / setLayer()
	UI管理	setVisibleSliderbar() / setVisibleCentermark() getVisibleCentermark() setVisibleCentermarkButton() setEnableWheelOperation()
	アイコン	addIcon() / addIcons() / addCategory() removeCategory() / getIcon() / removeIcon() clearIcon() / moveToIcon() / openPopup() closePopup() / setEnableClickPopup() setEnableLabel() / setEnableDraggableMode()
	位置情報	getCenter() / getBottomLeft() / getTopRight() getCurrentLayer() / getCurrentMode() getSuitableLayer()
	イベント	addEvent() / removeEvent()
	ポリライン、ポリゴン	addPolyline() / addPolylines() / addPolygon() addPolygons() / removeVectorObject() clearVectorObject() / getVectorObject() setEnableVectorClickPopup() openVectorPopup() / closeVectorPopup()
	GeoRSS	yGeoRSS() / yGeoRSSsetCategory() yGeoRSSloadXML() / yGeoRSSshowIcon() yGeoRSShideIcon() / yGeoRSSgetData()

このページのトップへ

YLLPointクラス

>>「YLLPointクラス」に移動する

コンストラクタ	YLLPoint(lat, lon) / YLLPoint(pos)
プロパティ	lat / lon
メソッド	toString()

このページのトップへ

定数

>>「定数」に移動する

YMapMode定数（地図の種類）	MAP / AERO
YDatumType定数（測地系）	TOKYO97 / WGS84
YEventType定数（イベント）	MAP_CLICK / MAP_MOVING / MAP_MOVED LAYER_CHANGED / MODE_CHANGED MOUSE_OVER / MOUSE_OUT / MOUSE_MOVE ICON_CLICK / ICON_DBLCLICK ICON_MOUSEDOWN / ICON_MOUSEUP ICON_MOUSEOVER / ICON_MOUSEOUT POPUP_OPEN / POPUP_CLOSE

このページのトップへ

YahooMapsCtrlクラス

地図を初期化し、動作モード、初期表示の設定を行います。
YahooMapsCtrlクラスのオブジェクトを作成し、それを用いて地図を操作します。

YahooMapsCtrlクラス＞コンストラクタ

コンストラクタ	説明	詳細
YahooMapsCtrl(id, pos, layer, mode, datum)	地図を初期化し、動作モード、初期表示の設定を行う。	詳細
YahooMapsCtrl(element, pos, layer, mode, datum)	地図を初期化し、動作モード、初期表示の設定を行う。	詳細

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞地図の操作

メソッド	説明	詳細
homeTo()	ホーム位置へ移動する。	詳細
zoomIn()	より詳細な縮尺に切り替える。	詳細
zoomOut()	より広域な縮尺に切り替える。	詳細
changeMode()	地図の種類を切り替える。	詳細
moveTo()	指定した位置に移動する。	詳細
layerTo()	指定した縮尺にスムーズに切り替える。	詳細
setLayer()	指定した縮尺に切り替える。	詳細

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞UI管理

メソッド	説明	詳細
setVisibleSliderbar()	スライダーバーか縮尺切替ボタンを選択する。	詳細
setVisibleCentermark()	中心点の表示/非表示を設定する。	詳細
getVisibleCentermark()	中心点の表示/非表示を取得する。	詳細
setVisibleCentermarkButton()	中心点表示ボタンの表示/非表示を設定する。	詳細
setEnableWheelOperation()	マウスホイール操作の有効/無効を設定する。	詳細

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞アイコン

メソッド	説明	詳細
addIcon()	アイコンを配置する。	詳細
addIcons()	複数のアイコンを配置する。	詳細
addCategory()	カテゴリ（アイコン画像）を追加する。	詳細
removeCategory()	カテゴリ（アイコン画像）を削除する。	詳細
getIcon()	アイコンの情報を取得する。	詳細
removeIcon()	アイコンを削除する。	詳細
clearIcon()	すべてのアイコンを削除する。	詳細
moveToIcon()	指定したアイコンの位置に移動する。	詳細
openPopup()	アイコンの吹き出しを開く。	詳細
closePopup()	開いているアイコンの吹き出しを閉じる。	詳細
setEnableClickPopup()	アイコンの吹き出しの開き方を設定する。	詳細
setEnableLabel()	アイコンのラベルの表示/非表示を設定する。	詳細
setEnableDraggableMode()	アイコンのドラッグが有効か無効かを設定する。	詳細

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞位置情報

メソッド	説明	詳細
getCenter()	中心の緯度経度を取得する。	詳細
getBottomLeft()	左下の緯度経度を取得する。	詳細
getTopRight()	右上の緯度経度を取得する。	詳細
getCurrentLayer()	現在の縮尺を取得する。	詳細
getCurrentMode()	現在の地図の種類を取得する。	詳細
getSuitableLayer()	指定した二点が表示可能な最大の縮尺を返す。	詳細

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞イベント

メソッド	説明	詳細
addEvent()	イベントに伴う処理を登録する。	詳細
removeEvent()	イベントに伴う処理を削除する。	詳細

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞ポリライン、ポリゴン

メソッド	説明	詳細
addPolyline()	地図上にポリラインを描く。	詳細
addPolylines()	複数のポリラインを描く。	詳細
addPolygon()	地図上にポリゴンを描く。	詳細
addPolygons()	複数のポリゴンを描く。	詳細
removeVectorObject()	ポリライン、ポリゴンを削除する。	詳細
clearVectorObject()	すべてのポリライン、ポリゴンを削除する。	詳細
getVectorObject()	ポリライン、ポリゴンの情報を取得する。	詳細
setEnableVectorClickPopup()	ポリライン、ポリゴンの吹き出しの表示方法を設定する。	詳細
openVectorPopup()	ポリライン、ポリゴンの吹き出しを開く。	詳細
closeVectorPopup()	ポリライン、ポリゴンの吹き出しを閉じる。	詳細

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞GeoRSS

メソッド	説明	詳細
yGeoRSS()	GeoRSSを初期化し、データ取得完了時の処理を登録する。	詳細
yGeoRSSsetCategory()	地図上にGeoRSSデータを表示する際のカテゴリ（アイコン画像）を設定する。	詳細
yGeoRSSloadXML()	地図上に表示するGeoRSSデータのURLを指定する。	詳細
yGeoRSSshowIcon()	GeoRSSのアイコンを地図上に表示する。	詳細
yGeoRSShideIcon()	GeoRSSのアイコンを非表示にする。	詳細
yGeoRSSgetData()	GeoRSSデータを取得する。	詳細

このページのトップへ

YLLPointクラス

緯度経度情報を利用、操作する際に用いるクラスです。
オブジェクトとして緯度経度が扱えるため、プロパティやメソッドを用いることで、自由に緯度経度を操作できます。

YLLPointクラス＞コンストラクタ

コンストラクタ	説明	詳細
YLLPoint(lat, lon)	緯度経度を設定する。	詳細
YLLPoint(pos)	緯度経度を設定する。	詳細

このページのトップへ

YLLPointクラス＞プロパティ

プロパティ	説明
lat	緯度を取得、設定する（度形式）。
lon	経度を取得、設定する（度形式）。

※サンプルがtoString()の項目にあります。

このページのトップへ

YLLPointクラス＞メソッド

メソッド	説明	詳細
toString()	緯度経度を文字列形式（度.分.秒形式）に変換する。	詳細

このページのトップへ

定数

YMapMode定数

表記例：YMapMode.MAP

定数	説明
MAP	地図を表す。
AERO	航空写真を表す。

このページのトップへ

YDatumType定数

表記例：YDatumType.TOKYO97

※測地系についてはこちらで解説します。

定数	説明
TOKYO97	日本測地系を表す。
WGS84	世界測地系を表す。

このページのトップへ

YEventType定数

表記例：YEventType.MAP_CLICK

定数	説明	引数
MAP_CLICK	地図をクリックしたときに発生する。	クリック位置の緯度経度（YLLPointクラス）
MAP_MOVING	地図を移動しているときに連続的に発生する。	なし
MAP_MOVED	地図の移動を完了したときに発生する。	なし
LAYER_CHANGED	縮尺を変更したときに発生する。	なし
MODE_CHANGED	地図の種類を変更したときに発生する。	なし
MOUSE_OVER	地図上にマウスオーバーしたときに発生する。	なし
MOUSE_OUT	地図上からマウスアウトしたときに発生する。	なし
MOUSE_MOVE	地図上でマウスカーソルが移動したときに発生する。	カーソル位置の緯度経度（YLLPointクラス）
ICON_CLICK	アイコンをクリックしたときに発生する。	対象アイコンのID
ICON_DBLCLICK	アイコンをダブルクリックしたときに発生する。	対象アイコンのID
ICON_MOUSEDOWN	アイコンにマウスダウンしたときに発生する。	対象アイコンのID
ICON_MOUSEUP	アイコンにマウスアップしたときに発生する。	対象アイコンのID
ICON_MOUSEOVER	アイコンにマウスオーバーしたときに発生する。	対象アイコンのID
ICON_MOUSEOUT	アイコンからマウスアウトしたときに発生する。	対象アイコンのID
POPUP_OPEN	吹き出しを開いたときに発生する。	対象アイコンのID
POPUP_CLOSE	吹き出しを閉じたときに発生する。	なし

このページのトップへ

コンストラクタ一覧

YahooMapsCtrlクラス＞コンストラクタ

YahooMapsCtrl(id, pos, layer, mode, datum)

地図を初期化し、動作モード、初期表示の設定を行います。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	HTML ElementのID属性	文字列。地図を表示したい場所のHTML Element（タグ名）のID属性を指定します。
pos	緯度経度	YLLPointクラスまたは文字列。初期表示位置（ホーム位置）の緯度経度を指定します。省略可：デフォルトは「六本木ヒルズ」です。
layer	縮尺階層	数値型。 ※1～11で設定（1が詳細、11が広域）。初期表示（ホーム）の際の縮尺を指定します。省略可：デフォルトは「3」です。
mode	地図の種類	YMapMode定数。初期表示（ホーム）の際の地図の種類を指定します。地図は YMapMode.MAP、航空写真は YMapMode.AEROを指定します。省略可：デフォルトは「地図」です。
datum	測地系	YDatumType定数。測地系の設定を行います（測地系はコンストラクタ以外では変更できません）。世界測地系は YDatumType.WGS84、日本測地系は YDatumType.TOKYO97を指定します。省略可：デフォルトは「日本測地系」です。

サンプルはこちらを参照してください。

YahooMapsCtrl(element, pos, layer, mode, datum)

地図を初期化し、動作モード、初期表示の設定を行います。

引数は以下の通りです。

パラメータ	意味	データ型・備考
element	HTML Element	文字列。地図を表示したい場所のHTML Element（タグ名）を指定します。
pos	緯度経度	YLLPointクラスまたは文字列。初期表示位置（ホーム位置）の緯度経度を指定します。省略可：デフォルトは「六本木ヒルズ」です。
layer	縮尺階層	数値型。 ※1～11で設定（1が詳細、11が広域）。初期表示（ホーム）の際の縮尺を指定します。省略可：デフォルトは「3」です。
mode	地図の種類	YMapMode定数。初期表示（ホーム）の際の地図の種類を指定します。地図は YMapMode.MAP、航空写真は YMapMode.AEROを指定します。省略可：デフォルトは「地図」です。
datum	測地系	YDatumType定数。初期表示（ホーム）の際の測地系の種類を指定します。世界測地系は YDatumType.WGS84、日本測地系は YDatumType.TOKYO97を指定します。省略可：デフォルトは「日本測地系」です。

サンプルはこちらを参照してください。

※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload=function(){
   map1 = new YahooMapsCtrl("m1", "35,135", 3, YMapMode.MAP, YDatumType.TOKYO97);
   map2 = new YahooMapsCtrl("m2", "35,135", 3, YMapMode.MAP, YDatumType.WGS84);
   
   map1.addEvent(YEventType.MAP_MOVING, map_move1);
   map1.addEvent(YEventType.MAP_MOVED, map_move1);
   document.getElementById("move1").onclick = move;
   document.getElementById("move2").onclick = move;
   document.getElementById("move3").onclick = move;
   document.getElementById("move4").onclick = move;
}
function map_move1() {
   var center = map1.getCenter();
   map2.moveTo(center);
}
function move(e) {
   e = (e ? e:window.event);
   var target = e.srcElement || e.target;

   var p1 = "35, 135";
   var p2 = "35.65678, 139.733555";
   var p3 = "35.66258056, 139.73418889";
   var p4 = "35.67832667, 139.77044378";

   if (target.id == "move1"){
      map1.moveTo(p1);
      map2.moveTo(p1);
      map1.addIcon("icon1", p1);
      map2.addIcon("icon2", p1);
   } else if (target.id == "move2") {
      map1.moveTo(p2);
      map2.moveTo(p2);
      map1.addIcon("icon1", p2);
      map2.addIcon("icon2", p2);
   } else if (target.id == "move3") {
      map1.moveTo(p3);
      map2.moveTo(p3);
      map1.addIcon("icon1", p3);
      map2.addIcon("icon2", p3);
   } else if (target.id == "move4") {
      map1.moveTo(p4);
      map2.moveTo(p4);
      map1.addIcon("icon1", p4);
      map2.addIcon("icon2", p4);
   }
}

</script>
</head>
<body>
<table>
<tr>
<td>
   日本測地系
   <div id="m1" style="width: 300px; height: 300px"></div>
</td>
<td>
   世界測地系
   <div id="m2" style="width: 300px; height: 300px"></div>
</td>
</tr>
<tr>
   <td colspan="2">
      <input type="button" id="move4" value="東京駅"><input type="button" id="move2" value="六本木ヒルズ">
      <input type="button" id="move3" value="東京ミッドタウン"><input type="button" id="move1" value="日本へそ公園">
   </td>
</tr>
</table>
</body>
</html>

YLLPointクラス＞コンストラクタ

YLLPoint(lat, lon)

緯度経度を設定します。
緯度と経度を個別の引数として指定する方法です。

引数は以下の通りです。

パラメータ	意味	データ型・備考
lat	緯度	文字列または数値型。緯度を度形式、度.分.秒形式または度/分/秒形式で指定します。主な地点の緯度経度はこちら。
lon	経度	文字列または数値型。経度を度形式、度.分.秒形式または度/分/秒形式で指定します。主な地点の緯度経度はこちら。

サンプルがtoString()の項目にあります。

YLLPoint(pos)

緯度経度を設定します。
緯度と経度を一つの引数として指定する方法です。

引数は以下の通りです。

パラメータ	意味	データ型・備考
pos	緯度経度	文字列。緯度経度を度形式、度.分.秒形式または度/分/秒形式で指定します。主な地点の緯度経度はこちら。緯度と経度の間をカンマ（,）で区切り、一つの文字列として指定します。例）var point = new YLLPoint("35.40.40.13, 139.46.15.214");

サンプルがtoString()の項目にあります。

このページのトップへ

メソッド一覧

YahooMapsCtrlクラス＞メソッド＞地図の操作

homeTo()

YahooMapsCtrlコンストラクタで設定（初期化）したホーム位置に移動します。

zoomIn()

現在より一段階詳細な縮尺で地図を表示します。

zoomOut()

現在より一段階広域の縮尺で地図を表示します。

changeMode(mode)

引数で指定した地図の種類（地図または航空写真）に切り替えます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
mode	地図の種類	YMapMode定数。地図（YMapMode.MAP）と航空写真（YMapMode.AERO）を選べます。

moveTo(pos)

引数で指定した位置を中心に移動します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
pos	緯度経度	YLLPointクラスまたは文字列。主な地点の緯度経度はこちら。

layerTo(layer)

引数で指定した縮尺をスムーズに切り替えます。
引数は以下の通りです。
パラメータ意味データ型・備考
layer

縮尺階層
数値型。
※1～11で設定（1が詳細、11が広域）。
setLayer()の項目にlayerTo()とsetLayer()を比較するサンプルがあります。

setLayer(layer)

引数で指定した縮尺を瞬時に切り替えます。
引数は以下の通りです。
パラメータ意味データ型・備考
layer

縮尺階層
数値型。
※1～11で設定（1が詳細、11が広域）。
サンプル：layerTo()との比較
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   point0 = new YLLPoint("35.67832667, 139.77044378");
   ymap1 = new YahooMapsCtrl("map1", point0, 3);
   ymap2 = new YahooMapsCtrl("map2", point0, 3);

   ymap1.setEnableWheelOperation(false);
   ymap2.setEnableWheelOperation(false);

   document.getElementById("button1").onclick = zoomin;
   document.getElementById("button2").onclick = zoomout;
}
function zoomin(){
   var layer = ymap1.getCurrentLayer();
   ymap1.layerTo(layer-1);
   ymap2.setLayer(layer-1);
}
function zoomout(){
   var layer = ymap1.getCurrentLayer();
   ymap1.layerTo(layer+1);
   ymap2.setLayer(layer+1);
}
</script>
</head>
<body>
<table cellspacing="10">
<tr>
   <td>layerTo()はスムーズに変更<div id="map1" style="width: 250px; height: 250px"></div></td>
   <td>setLayer()はパッと変更<div id="map2" style="width: 250px; height: 250px"></div></td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="button" id="button1" value="拡大する">   <input type="button" id="button2" value="縮小する"></td>
</tr>
</table>
</body>
</html>

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞UI管理

setVisibleSliderbar(value)

スライダーバーもしくは縮尺切り替えボタンのどちらを表示するかを設定します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
value	表示方法	論理型。 true - スライダーバーを表示します（デフォルト）。 false - 縮尺切り替えボタンを表示します。

setVisibleCentermark(value)

中心点の表示/非表示を設定します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
value	表示/非表示	論理型。 true - 中心点を表示します（デフォルト）。 false - 中心点を表示しません。

getVisibleCentermark()

中心点が表示されているかどうかの情報を取得します。

戻り値は以下の通りです。

パラメータ	意味	データ型・備考
value	表示/非表示	論理型。 true - 中心点が表示されています。 false - 中心点が表示されていません。

setVisibleCentermarkButton(value)

中心点表示ボタンの表示/非表示を設定します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
value	表示/非表示	論理型。 true - 中心点表示ボタンを表示します。 false - 中心点表示ボタンを表示しません（デフォルト）。

setEnableWheelOperation(value)

マウスホイールで地図を操作できるかどうかを設定します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
value	可/不可	論理型。 true - マウスホイールで地図を操作できます（デフォルト）。 false - マウスホイールは利用できません。

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞アイコン

addIcon(id,pos,popup,type,label)

アイコンを地図上に配置します。
アイコンについての詳しい解説はこちらを参照してください。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	アイコンID	文字列。任意の文字列を指定します。アイコンを操作するときに使います。
pos	緯度経度	文字列またはYLLPointクラス。
popup	吹き出し内容	文字列。 HTMLが使用可能です。吹き出しが不要のときは、「""」としてください。
type	カテゴリID	文字列。利用するアイコン画像（カテゴリ）のIDを指定します。
label	ラベル内容	文字列。 HTMLは利用できません。省略可。

地図上にアイコンを設置することで、地図にマーキングできます。
ラベルをはって、何のアイコンかを表示したり、そのポイントの詳細情報をポップアップの吹き出しで表示できます。

あらかじめ用意しているアイコン画像は以下の10種類があります。利用するアイコン画像のカテゴリIDをaddIcon()の第4引数に記入してください。

カテゴリID	アイコン画像	カテゴリID	アイコン画像
"L1"		"S1"
"L2"		"S2"
"L3"		"S3"
"L4"		"S4"
"L5"		"S5"

用意したアイコン画像以外に、任意の画像をアイコンとして利用することもできます。
addCategory()でアイコンとして用いたい画像とそのカテゴリIDを登録し、カテゴリIDをaddIcon()の第4引数で指定してください。
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   point0 = new YLLPoint("35.65678, 139.733555");
   ymap = new YahooMapsCtrl("map", point0, 4);

   var url = "pin.gif";
   var param = { "width": 30, "height": 30, "dx": 0, "dy": -15 };
   ymap.addCategory("pin", url, param);

   var popup = "緯度：" + point0.lat + "<br>経度：" + point0.lon + "</font>";
   var label = "ホーム（六本木ヒルズ）"
   ymap.addIcon("homeicon", point0, popup, "pin", label)
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

addIcons(ary)

複数のアイコンを同時に配置します。
addIcon()で一つずつ表示するより高速で配置できます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
ary	アイコン情報	配列。各要素にアイコン情報が格納された配列。指定の方法はサンプルを参照してください。

配列の一つの要素が一つのアイコンを表します。
配列の一つの要素は以下のパラメータが格納されたオブジェクトになっています。
- id - アイコンのID（任意の文字列が使用可能）。アイコンを操作するときに使います。
- pos - 緯度経度（文字列またはYLLPointクラス）。
- popup - 吹き出しの内容（HTMLが使用可能）。
- type - 利用するアイコン画像（カテゴリ）のID。
- label - ラベル（省略可能）。
配列の一つの要素は以下のようなハッシュのオブジェクトとして登録されています。
{ "id":"icon1", "pos":"35.40.39.798,139.46.15.436", "popup":"吹き出し", "type":"L1", "label":"ラベル"};
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   var point0 = new YLLPoint("37.40834666405165, 138.80361130017113");
   ymap = new YahooMapsCtrl("map", point0, 10);

   put_icons();
   document.getElementById("button").onclick = put_icons;
}
function put_icons() {
   var ele = ymap.getIcon("icon1");
   if (ele) {
      ymap.clearIcon();
   } else {
      var icons = new Array();
      icons[0] = new Object();
      icons[0].id = "icon1";
      icons[0].pos = "35.67832667, 139.77044378";
      icons[0].popup = "<u>東京23区</u><br>約870万人";
      icons[0].label = "東京23区";

      icons[1] = new Object();
      icons[1].id = "icon2";
      icons[1].pos = "34.69872178, 135.49794378";
      icons[1].popup = "<u>大阪市</u><br>約270万人";
      icons[1].label = "大阪市";

      icons[2] = new Object();
      icons[2].id = "icon3";
      icons[2].pos = "35.1675, 136.88555556";
      icons[2].popup = "<u>名古屋市</u><br>約220万人";
      icons[2].label = "名古屋市";

      icons[3] = new Object();
      icons[3].id = "icon4";
      icons[3].pos = "33.58644422, 130.42286022";
      icons[3].popup = "<u>福岡市</u><br>約140万人";
      icons[3].label = "福岡市";

      icons[4] = new Object();
      icons[4].id = "icon5";
      icons[4].pos = "43.06011, 141.35727694";
      icons[4].popup = "<u>札幌市</u><br>約190万人";
      icons[4].label = "札幌市";

      ymap.addIcons(icons);
   }
}

</script>
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<input type="button" id="button" value="アイコンを表示/非表示にする">
</body>
</html>

addCategory(id, img, param)

カテゴリを登録します。また、任意の画像をアイコン画像として登録できます。
※カテゴリとは「アイコンの分類」を指しますが、アイコン画像の振り分けにより機能しています。詳細はこちらを参照してください。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	カテゴリID	文字列。任意の文字列を指定してください。addIcon()でアイコン画像として呼び出すときに使います。
img	URL	文字列。画像のアドレスを指定します。
param	画像スタイル	オブジェクト型。下の表で表される項目が設定できます。設定できる項目と設定の仕方は下の表を参照してください。省略可。

addCategory()の第3引数で指定できるアイコン画像のスタイルは次のように指定します。
例）{ "width":20, "height": 20, "dx": -10, "dy": 0 };

設定項目	内容	設定方法
width	幅	ピクセル単位。
height	高さ	ピクセル単位。
dx	基準の位置（横）	ピクセル単位。アイコン画像のX方向の移動量です。アイコンの中心を原点、右を正（＋）、左を負（−）として、dxの値だけ画像を移動させた位置がアイコンの基準の位置になります。
dy	基準の位置（縦）	ピクセル単位。アイコン画像のY方向の移動量です。アイコンの中心を原点、下を正（＋）、上を負（−）として、dyの値だけ画像を移動させた位置がアイコンの基準の位置になります。

※アイコン画像の基準の位置（dx、dy）についての詳細はマニュアルを参照してください。

サンプルはaddIcon()の項目を参照してください。

removeCategory(id)

カテゴリ（アイコン画像）を削除します。
引数は以下の通りです。
パラメータ意味データ型・備考
id

カテゴリID
文字列。
削除するカテゴリのIDを指定します。

getIcon(id)

引数で指定したアイコン情報を取得します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	アイコンID	文字列。情報を取得したいアイコンのIDを指定します。

戻り値は以下の通りです。

パラメータ	意味	データ型・備考
obj	アイコン情報の配列	オブジェクト型。オブジェクトは以下のパラメータを持ちます。 id - アイコンのID pos - 緯度経度（YLLPointクラス） popup - 吹き出しの内容 type - カテゴリのID label - ラベル

サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   var point0 = new YLLPoint("37.40834666405165, 138.80361130017113");
   ymap = new YahooMapsCtrl("map", point0, 10);

   document.getElementById("icon1").onclick = button_click;
   document.getElementById("icon2").onclick = button_click;
   document.getElementById("icon3").onclick = button_click;
   document.getElementById("icon4").onclick = button_click;
   document.getElementById("icon5").onclick = button_click;

   var icons = new Array();
   icons[0] = new Object();
   icons[0].id = "icon1";
   icons[0].pos = "35.67832667, 139.77044378";
   icons[0].popup = "<u>東京23区</u> - 約870万人";
   icons[0].label = "東京23区";

   icons[1] = new Object();
   icons[1].id = "icon2";
   icons[1].pos = "34.69872178, 135.49794378";
   icons[1].popup = "<u>大阪市</u> - 約270万人";
   icons[1].label = "大阪市";

   icons[2] = new Object();
   icons[2].id = "icon3";
   icons[2].pos = "35.1675, 136.88555556";
   icons[2].popup = "<u>名古屋市</u> - 約220万人";
   icons[2].label = "名古屋市";

   icons[3] = new Object();
   icons[3].id = "icon4";
   icons[3].pos = "33.58644422, 130.42286022";
   icons[3].popup = "<u>福岡市</u> - 約140万人";
   icons[3].label = "福岡市";

   icons[4] = new Object();
   icons[4].id = "icon5";
   icons[4].pos = "43.06011, 141.35727694";
   icons[4].popup = "<u>札幌市</u> - 約190万人";
   icons[4].label = "札幌市";

   ymap.addIcons(icons);
}
function button_click(e) {
   e = (e ? e:window.event);
   var target = e.srcElement || e.target;

   var points = "<ul>";
   points += "<li>アイコンID：" + target.id + "<br>";
   points += "<li>地点：" + ymap.getIcon(target.id).pos + "<br>";
   points += "<li>吹き出し：" + ymap.getIcon(target.id).popup + "<br>";
   points += "<li>カテゴリ：" + ymap.getIcon(target.id).type + "<br>";
   points += "<li>ラベル：" + ymap.getIcon(target.id).label + "<br>";
   points += "</ul>"
   document.getElementById("showpoint").innerHTML = points;
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
<input type="button" id="icon1" value="東京">
<input type="button" id="icon2" value="大阪">
<input type="button" id="icon3" value="名古屋">
<input type="button" id="icon4" value="福岡">
<input type="button" id="icon5" value="札幌">
<hr>
<div id="showpoint" style="border:1px solid #999999; width: 300px">アイコンの情報</div>
</body>
</html>

removeIcon(id)

引数で指定したアイコンを削除します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	アイコンID	文字列。削除するアイコンのIDを指定します。

clearIcon()

すべてのアイコンを削除します。

moveToIcon(id)

引数で指定したアイコンの位置に移動します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	アイコンID	文字列。移動先のアイコンのIDを指定します。

openPopup(id)

アイコンの吹き出しを開きます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	アイコンID	文字列。吹き出しを開きたいアイコンのIDを指定します。

closePopup()

開いているすべてのアイコンの吹き出しを閉じます。

setEnableClickPopup(value)

アイコンの吹き出しの表示の仕方（アイコンをクリックまたはマウスオーバー）を設定します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
value	表示方法	論理型。 true - アイコンをクリックすると吹き出し表示。 false - アイコンにマウスオーバーすると吹き出し表示（デフォルト）。

setEnableLabel(value)

アイコンのラベルの表示/非表示を設定します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
value	表示/非表示	論理型。 true - ラベルを表示します（デフォルト）。 false - ラベルを表示しません。

setEnableDraggableMode(value)

アイコンをドラッグで移動できるかどうかを設定します。
この設定はすべてのアイコンに適用されます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
value	可/不可	論理型。 true - アイコンをドラッグで移動させることができます。 false - アイコンの位置を固定します（デフォルト）。

アイコンを移動した際、アイコンのもつ緯度経度情報が変更されます。
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   point0 = new YLLPoint("35.67832667, 139.77044378");
   ymap = new YahooMapsCtrl("map", point0, 4);

   var popup = "元の位置：<br>緯度：" + point0.lat + "<br>経度：" + point0.lon + "</font>";
   var label = "アイコンが移動できます"
   ymap.addIcon("home", point0, popup, "L1", label)
   ymap.setEnableDraggableMode(true);
   ymap.addEvent(YEventType.ICON_CLICK, icon_click);
}
function icon_click() {
   var i = ymap.getIcon("home").pos;
   var gap = new YLLPoint(i.lat - point0.lat, i.lon - point0.lon);
   alert("東京駅からこれだけ離れました。\n緯度：" + gap.lat + "\n経度：" + gap.lon);
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞位置情報

getCenter()

現在の地図の中心の緯度経度を取得します。
戻り値は以下の通りです。
パラメータ意味データ型・備考
pos

緯度経度
YLLPointクラス。
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
var points = new Array();

window.onload = function() {
   var point0 = new YLLPoint("35.65678, 139.733555");
   ymap = new YahooMapsCtrl("map", point0, 4);

   ymap.addEvent(YEventType.MAP_MOVED, map_move);
   ymap.addEvent(YEventType.MAP_MOVING, map_move);
}
function map_move() {
   var point = ymap.getCenter();
   document.getElementById("lat").value = point.lat;
   document.getElementById("lon").value = point.lon;
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
<p>現在地は．．．<br>
緯度：<input type="text" id="lat" size="30"><br>
経度：<input type="text" id="lon" size="30">
</p>
</body>
</html>

getBottomLeft()

現在の地図の左下の緯度経度を取得します。
戻り値は以下の通りです。
パラメータ意味データ型・備考
pos

緯度経度
YLLPointクラス。

getTopRight()

現在の地図の右上の緯度経度を取得します。
戻り値は以下の通りです。
パラメータ意味データ型・備考
pos

緯度経度
YLLPointクラス。

getCurrentLayer()

現在表示されている縮尺階層を取得します。
戻り値は以下の通りです。
パラメータ意味データ型・備考
layer

縮尺階層
数値型。
※1～11で設定（1が詳細、11が広域）。

getCurrentMode()

現在表示されている地図の種類を取得します。
戻り値は以下の通りです。
パラメータ意味データ型・備考
mode

地図の種類
YMapMode定数。

getSuitableLayer(p1, p2)

引数で指定した二点が表示可能な最大の縮尺を返します。
引数は以下の通りです。
パラメータ意味データ型・備考
p1, p2

緯度経度
文字列またはYLLPointクラス。

戻り値は以下の通りです。

パラメータ	意味	データ型・備考
layer	縮尺階層	数値型。 1～11（1が詳細、11が広域）。返された縮尺に地図が存在することを保証するものではありません。

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞イベント

addEvent(type, func)

地図上で使えるイベントハンドラを登録します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
type	イベント	YEventType定数。発生させるイベントの種類を記述します。
func	処理	関数。イベントの発生に伴う処理の内容を指定します。指定の方法はサンプルを参照してください。

戻り値は以下の通りです。

パラメータ	意味	データ型・備考
obj	イベントオブジェクト	removeEvent()でイベントを削除する際に戻り値が必要となります。

サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
var n = 0;

window.onload = function() {
   var point0 = new YLLPoint("35.65678, 139.733555");
   ymap = new YahooMapsCtrl("map", point0, 4);

   ymap.addEvent(YEventType.MAP_CLICK, map_click);
   ymap.addEvent(YEventType.MAP_MOVING, map_moving);
   ymap.addEvent(YEventType.MAP_MOVED, map_moved);
   ymap.addEvent(YEventType.ICON_CLICK, icon_click);
}
function map_click(pos) {
   n++;
   ymap.addIcon("icon" + n, pos, "", "L1");
}
function icon_click(id) {
   ymap.removeIcon(id);
}
function map_moving() {
   document.getElementById("comment").innerHTML = "地図が動いています。";
}
function map_moved() {
   document.getElementById("comment").innerHTML = "地図は止まっています。";
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
地図を動かすと下のカッコ内にコメントが表示されます。<br>
[<span id="comment">地図は止まっています。</span>]
</body>
</html>

removeEvent(obj)

イベント発生に伴う処理を削除します。
イベントを使わなくなったときはaddEvent()で追加したイベントに伴う処理を削除します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
obj	イベントオブジェクト	オブジェクト型。削除したいイベントのaddEvent()の戻り値を指定します。

サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   var point0 = new YLLPoint("35.65678, 139.733555");
   ymap = new YahooMapsCtrl("map", point0, 4);

   document.getElementById("remove_event").onclick = button_click;
   event1 = ymap.addEvent(YEventType.MAP_MOVING, map_moving);
   event2 = ymap.addEvent(YEventType.MAP_MOVED, map_moved);
}
function map_moving() {
   document.getElementById("comment").innerHTML = "地図が動いています。";
}
function map_moved() {
   document.getElementById("comment").innerHTML = "地図は止まっています。";
}
function button_click() {
   ymap.removeEvent(event1);
   ymap.removeEvent(event2);
   document.getElementById("comment").innerHTML = "地図の状態を表示しません。";
}
</script>
</head>
<body>
<div id="map" style="width: 400px, height: 400px"></div>
地図を動かすと下のカッコ内にコメントが表示されます。<br>
[<span id="comment">地図は止まっています。</span>]<br>
<input type="button" id="remove_event" value="イベントを削除する（コメントを消す）">
</body>
</html>

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞ポリライン、ポリゴン

addPolyline(id, pos, popup, style)

引数で指定した位置にポリラインを描きます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	オブジェクトID	文字列。任意の文字列を指定します。ポリラインを操作するときに使います。
pos	緯度経度	配列。各要素にYLLPointクラスが格納された配列。指定の方法はサンプルを参照してください。
popup	吹き出し内容	文字列。 HTMLが利用できます。吹き出しが不要のときは、「""」としてください。
style	スタイル	オブジェクト型。ポリラインのスタイルを定義します。設定できるポリラインのスタイルは以下の通りです。

addPolyline()の第4引数で指定できるポリラインのスタイルはハッシュで次のように指定します。
{ "strokeWidth": 2, "strokeColor": "ffffff", "strokeOpacity": 0.5 };

設定項目	内容	設定方法
strokeWidth	線の太さ	ピクセル単位。
strokeColor	線の色	線の色を16進数表現で指定。　例）"ffffff" ※カラーコードの「#」は不要です。
strokeOpacity	線の透明度	0～1で指定。

戻り値は以下の通りです。

パラメータ	意味	データ型・備考
id	右欄参照	成功した場合: 作成されたポリラインのオブジェクトID。失敗した場合: false。

地図上にポリラインを描くことで、地図上にマーキングできます。
ポリラインには吹き出しを持たせられ、そこに情報を表示できます。
すでに同じIDのポリライン（ポリゴン）が存在する場合、新しく指定したポリライン（ポリゴン）で更新されます。
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   var point0 = new YLLPoint("35.1675, 136.88555556");
   ymap = new YahooMapsCtrl("map", point0, 10);

   var pos = new Array();
   pos.push(new YLLPoint("35.67832667, 139.77044378"));
   pos.push(new YLLPoint("35.46222222, 139.62444444"));
   pos.push(new YLLPoint("34.96852756, 138.39299911"));
   pos.push(new YLLPoint("35.1675, 136.88555556"));
   pos.push(new YLLPoint("34.98194444, 135.76138889"));
   pos.push(new YLLPoint("34.69872178, 135.49794378"));
   var style = { "strokeColor": "0000ff", "strokeWidth": 5, "strokeOpacity": 0.7 };

   ymap.addPolyline("p1", pos, "東京<-->大阪", style);
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

addPolylines(ary)

地図上に複数のポリラインを同時に描きます。
addPolyline()で一つずつ描くより高速に描画できます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
ary	ポリライン情報	配列。各要素にポリライン情報が格納された配列を指定します。指定の方法はサンプルを参照してください。

配列の一つの要素が一つのポリラインを表します。
配列の一つの要素は以下のようなパラメータが格納されたオブジェクトになっています。
※それぞれの要素、スタイルの設定項目についての詳細はaddPolyline()を参照してください。
- id - オブジェクトID（任意の文字列が使用可能）。
- pos - 各要素にYLLPointクラスが格納された配列。
- popup - 吹き出しの内容（HTML利用可）。
- style - ポリラインのスタイルを定義します。ハッシュで次のように定義します。
  { "strokeWidth": 2, "strokeColor": "ffffff", "strokeOpacity": 1 };
  - strokeWidth - 線の幅をピクセル値で指定。
  - strokeColor - 線の色を16進数表現で指定。例） "ffffff"
    ※カラーコードの「#」は不要です。
  - strokeOpacity - 線の透明度を0～1で指定。
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   var point0 = new YLLPoint("35.1675, 136.88555556");
   ymap = new YahooMapsCtrl("map", point0, 10);

   var polylines = new Array();
   polylines[0] = new Object();
   polylines[0].id = "p1";
   polylines[0].popup = "東京<-->大阪";
   polylines[0].style = { "strokeColor": "0000ff", "strokeWidth": 5, "strokeOpacity": 0.7 };
   polylines[0].pos = new Array(
      new YLLPoint("35.67832667, 139.77044378"), new YLLPoint("35.46222222, 139.62444444"),
      new YLLPoint("34.96852756, 138.39299911"), new YLLPoint("35.1675, 136.88555556"),
      new YLLPoint("34.98194444, 135.76138889"), new YLLPoint("34.69872178, 135.49794378"));
   polylines[1] = new Object();
   polylines[1].id = "p2";
   polylines[1].popup = "東京<-->盛岡";
   polylines[1].style = { "strokeColor": "ff0000", "strokeWidth": 5, "strokeOpacity": 0.7 };
   polylines[1].pos = new Array(
      new YLLPoint("35.67832667, 139.77044378"), new YLLPoint("38.2575, 140.885"),
      new YLLPoint("39.69861111, 141.14024956"));
   polylines[2] = new Object();
   polylines[2].id = "p3";
   polylines[2].popup = "大阪<-->福岡";
   polylines[2].style = { "strokeColor": "00ff00", "strokeWidth": 5, "strokeOpacity": 0.7 };
   polylines[2].pos = new Array(
      new YLLPoint("34.69872178, 135.49794378"), new YLLPoint("34.39402778, 132.47824978"),
      new YLLPoint("33.58644422, 130.42286022"));

   ymap.addPolylines(polylines);
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

addPolygon(id, pos, popup, style)

引数で指定した位置にポリゴンを描きます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	オブジェクトID	文字列。任意の文字列を指定します。ポリゴンを操作するときに使います。
pos	緯度経度	配列。各要素にYLLPointクラスが格納された配列。指定の方法はサンプルを参照してください。
popup	吹き出し内容	文字列。 HTMLタグが利用できます。吹き出しが不要のときは、「""」としてください。
style	スタイル	オブジェクト型。ポリゴンのスタイルを定義します。設定できるポリゴンのスタイルは以下の通りです。

addPolygon()の第4引数で指定できるポリゴンのスタイルはハッシュで次のように指定します。
{ "strokeWidth": 2, "strokeColor": "ffffff", "strokeOpacity": 0.8, "fillColor": "ffffff", "fillOpacity": 0.3 };

設定項目	内容	設定方法
strokeWidth	線の太さ	ピクセル単位。
strokeColor	線の色	16進数表現で指定。例）"ffffff" ※カラーコードの「#」は不要です。
strokeOpacity	線の透明度	0～1で指定。
fillColor	塗りつぶしの色	16進数表現で指定。例）"ffffff" ※カラーコードの「#」は不要です。
fillOpacity	塗りつぶしの透明度	0～1で指定。

戻り値は以下の通りです。

パラメータ	意味	データ型・備考
id	右欄参照	成功した場合: 作成されたポリゴンのオブジェクトID（文字列）。失敗した場合: false（論理型）。

地図上にポリゴンを描くことで、地図上にマーキングできます。
ポリゴンには吹き出しを持たせられ、そこに情報を表示できます。
すでに同じIDのポリゴン（ポリライン）が存在する場合、新しく指定したポリゴン（ポリライン）で更新されます。
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   var point0 = new YLLPoint("35.65678, 139.733555");
   ymap = new YahooMapsCtrl("map", point0, 3);

   var pos = new Array();
   pos.push(new YLLPoint("35.65496432331728", "139.7352891840444"));
   pos.push(new YLLPoint("35.655560525017165", "139.73090890957516"));
   pos.push(new YLLPoint("35.6582704766509", "139.73150925176128"));
   pos.push(new YLLPoint("35.657069076106865", "139.73480001633712"));
   pos.push(new YLLPoint("35.65556955834203", "139.73545594576294"));
   var popup = "六本木ヒルズ";
   var style = { "strokeColor": "ff0000", "strokeWidth": 5, "strokeOpacity": 1, "fillColor": "990000", "fillOpacity": 0.4 };

   ymap.addPolygon("p1", pos, popup, style);
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

addPolygons(ary)

地図上に複数のポリゴンを同時に描きます。
addPolygon()で一つずつ描くより高速に描画できます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
ary	ポリゴン情報	配列。各要素にポリゴン情報が格納された配列を指定します。指定の方法はサンプルを参照してください。

配列の一つの要素が一つのポリゴンを表します。
配列の一つの要素は以下のようなパラメータが格納されたオブジェクトになっています。
※それぞれの要素、スタイルの設定項目についての詳細はaddPolygon()を参照してください。
- id - オブジェクトID（任意の文字列が使用可能）。
- pos - 各要素にYLLPointクラスが格納された配列。
- popup - 吹き出しの内容（HTML利用可）。
- style - ポリゴンのスタイルを定義します。ハッシュで次のように定義します。
  { "strokeWidth": 2, "strokeColor": "ffffff", "strokeOpacity": 1 , "fillColor": "ffffff", "fillOpacity": 0.3 };
  - strokeWidth - 線の幅をピクセル値で指定。
  - strokeColor - 線の色を16進数表現で指定。例）"ffffff"
    ※カラーコードの「#」は不要です。
  - strokeOpacity - 線の透明度を0～1で指定。
  - fillColor - 塗りつぶし部分の色を16進数表現で指定。例）"ffffff"
    ※カラーコードの「#」は不要です。
  - fillOpacity - 塗りつぶし部分の透明度を0～1で指定。
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   var point0 = new YLLPoint("35.39.33.843, 139.44.2.016");
   ymap = new YahooMapsCtrl("map", point0, 3);

   var polygons = new Array();

   polygons[0] = new Object();
   polygons[0].id = "p1";
   polygons[0].popup = "六本木ヒルズ";
   polygons[0].style = { "strokeColor": "ff0000", "strokeWidth": 5, "strokeOpacity": 1, "fillColor": "990000", "fillOpacity": 0.4 };
   polygons[0].pos = new Array();
   polygons[0].pos.push(new YLLPoint("35.65496432331728", "139.7352891840444"));
   polygons[0].pos.push(new YLLPoint("35.655560525017165", "139.73090890957516"));
   polygons[0].pos.push(new YLLPoint("35.6582704766509", "139.73150925176128"));
   polygons[0].pos.push(new YLLPoint("35.657069076106865", "139.73480001633712"));
   polygons[0].pos.push(new YLLPoint("35.65556955834203", "139.73545594576294"));

   polygons[1] = new Object();
   polygons[1].id = "p2";
   polygons[1].popup = "東京ミッドタウン";
   polygons[1].style = { "strokeColor": "0000ff", "strokeWidth": 5, "strokeOpacity": 1, "fillColor": "000099", "fillOpacity": 0.4 };
   polygons[1].pos = new Array();
   polygons[1].pos.push(new YLLPoint("35.66104538507858, 139.73420726375062"));
   polygons[1].pos.push(new YLLPoint("35.66251635682339, 139.73234930944395"));
   polygons[1].pos.push(new YLLPoint("35.663919412090074, 139.73365265052476"));
   polygons[1].pos.push(new YLLPoint("35.66276528779862, 139.73612067937987"));
   polygons[1].pos.push(new YLLPoint("35.6620863832948, 139.73573245012176"));

   ymap.addPolygons(polygons);
}
</script>
</head>
<body>
<div id="map" style="width: 450px; height: 450px"></div>
</body>
</html>

removeVectorObject(id)

引数で指定したポリライン、ポリゴンを削除します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	オブジェクトID	文字列。削除するポリライン、ポリゴンのオブジェクトID。

clearVectorObject()

すべてのポリライン、ポリゴンを削除します。

getVectorObject(id)

引数で指定したポリライン、ポリゴンの情報を取得します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	オブジェクトID	文字列。情報を取得したいポリライン、ポリゴンのオブジェクトID。

戻り値は以下の通りです。

パラメータ	意味	データ型・備考
obj	ポリライン、ポリゴン情報	オブジェクト型。以下のパラメータを持つオブジェクトを取得します。 id - オブジェクトID。 kind - 図形の種類（polyline：ポリライン、polygon：ポリゴン）。 pos - 緯度経度（YLLPointクラス）の配列。 popup - 吹き出しの内容。 style - ポリライン、ポリゴンのスタイル定義。

サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   var point0 = new YLLPoint("35.6594806802077", "139.734039092737");
   ymap = new YahooMapsCtrl("map", point0, 3);
   document.getElementById("button1").onclick = button1_click;
   document.getElementById("button2").onclick = button2_click;

   var line = new Object();
   line.pos = new Array();
   line.pos.push(new YLLPoint("35.65819478789416", "139.73189253164358"));
   line.pos.push(new YLLPoint("35.65992911032425", "139.7354723498646"));
   line.pos.push(new YLLPoint("35.66160016661726", "139.73356014882725"));
   line.pos.push(new YLLPoint("35.66215115589061", "139.73408266887813"));
   line.pos.push(new YLLPoint("35.66199760188512", "139.73350456158778"));
   line.pos.push(new YLLPoint("35.66177178663468", "139.73403819908657"));
   line.pos.push(new YLLPoint("35.66215115589061", "139.73408266887813"));
   line.popup = "六本木ヒルズから東京ミッドタウン";
   line.style = { "strokeColor": "0000ff", "strokeWidth": 5, "strokeOpacity": 0.7 };
   ymap.addPolyline("p1", line.pos, line.popup, line.style);

   var area = new Object();
   area.pos = new Array();
   area.pos.push(new YLLPoint("35.65496432331728", "139.7352891840444"));
   area.pos.push(new YLLPoint("35.655560525017165", "139.73090890957516"));
   area.pos.push(new YLLPoint("35.6582704766509", "139.73150925176128"));
   area.pos.push(new YLLPoint("35.657069076106865", "139.73480001633712"));
   area.pos.push(new YLLPoint("35.65556955834203", "139.73545594576294"));
   area.popup = "六本木ヒルズ";
   area.style = { "strokeColor": "ff0000", "strokeWidth": 5, "strokeOpacity": 1, "fillColor": "990000", "fillOpacity": 0.4 };

   ymap.addPolygon("p2", area.pos, area.popup, area.style);
}
function button1_click() {
   var id =  ymap.getVectorObject("p1").id;
   var pos = ymap.getVectorObject("p1").pos;
   var popup = ymap.getVectorObject("p1").popup;
   var style = ymap.getVectorObject("p1").style;

   var info = "ポリラインの情報：<br>";
   info += "オブジェクトID：" + id + "<br>";
   info += "地点：<br><ul>";
   for (var i = 0; i < pos.length; i++) {
      info += "<li>" + pos[i];
   }
   info += "</ul>";
   info += "吹き出し：" + popup + "<br>";
   info += "スタイル：<br><ul>";
   info += "<li>線の色：" + style.strokeColor;
   info += "<li>線の太さ：" + style.strokeWidth;
   info += "<li>線の透明度：" + style.strokeOpacity;
   info += "</ul>";
   document.getElementById("showinfo").innerHTML = info;
}
function button2_click() {
   var id =  ymap.getVectorObject("p2").id;
   var pos = ymap.getVectorObject("p2").pos;
   var popup = ymap.getVectorObject("p2").popup;
   var style = ymap.getVectorObject("p2").style;

   var info = "ポリゴンの情報：<br>";
   info += "オブジェクトID：" + id + "<br>";
   info += "地点：<br><ul>";
   for (var i = 0; i < pos.length; i++) {
      info += "<li>" + pos[i];
   }
   info += "</ul>";
   info += "吹き出し：" + popup + "<br>";
   info += "スタイル：<br><ul>";
   info += "<li>線の色：" + style.strokeColor;
   info += "<li>線の太さ：" + style.strokeWidth;
   info += "<li>線の透明度：" + style.strokeOpacity;
   info += "<li>内部の色" + style.fillColor;
   info += "<li>内部の透明度" + style.fillOpacity;
   info += "</ul>";
   document.getElementById("showinfo").innerHTML = info;
}
</script>
</head>
<body>
<div id="map" style="width: 450px; height: 450px"></div>
<input type="button" id="button1" value="ポリライン情報を取得する">
<input type="button" id="button2" value="ポリゴン情報を取得する">
<hr>
<div id="showinfo"></div>
</body>
</html>

setEnableVectorClickPopup(value)

ポリライン、ポリゴンの吹き出しの表示の仕方（ポリライン、ポリゴンをクリックまたはマウスオーバー）を設定します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
value	表示方法	論理型。 true - ポリライン、ポリゴンをクリックで吹き出し表示。 false - ポリライン、ポリゴンにマウスオーバーで吹き出し表示（デフォルト）。

openVectorPopup(id)

引数で指定したポリライン、ポリゴンの吹き出しを開きます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	オブジェクトID	文字列。吹き出しを開きたいポリライン、ポリゴンのオブジェクトID。

closeVectorPopup()

すべての開いているポリライン、ポリゴンの吹き出しを閉じます。

このページのトップへ

YahooMapsCtrlクラス＞メソッド＞GeoRSS

yGeoRSS(func)

GeoRSSを初期化するメソッドです。
GeoRSSデータ取得完了時に呼び出されるイベントハンドラとして利用できます。

引数は以下の通りです。

パラメータ	意味	データ型・備考
func	イベントハンドラ関数	関数。 GeoRSSデータ取得完了時に呼び出される関数名を指定します。

onloadのタイミングで、他のGeoRSS関連のメソッドよりも先に呼び出してください。
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   point0 = new YLLPoint("37.40834666405165, 138.80361130017113");
   ymap = new YahooMapsCtrl("map", point0, 10);

   ymap.yGeoRSS(ygeorss);
   ymap.yGeoRSSsetCategory("L1");

   document.getElementById("read").onclick = read_click;
}
function ygeorss() {
   document.getElementById("comment").innerHTML = "";
   alert("読み込めました！");
}
function read_click() {
   var url = document.getElementById("rssurl").value;
   ymap.yGeoRSSloadXML(url);
   document.getElementById("comment").innerHTML = "<b>GeoRSSの読み込み中です</b>";
}
</script>
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<input type="text" size="50" id="rssurl" readOnly
   value="http://waiwai.map.yahoo.co.jp/rss/map/index.xml?mid=rtm&cc=jp">
<input type="button" id="read" value="RSSを読み込む"><br>
<div id="comment"></div>
</body>
</html>

yGeoRSSsetCategory(id)

地図上にGeoRSSデータを表示する際のアイコン画像を設定します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
id	カテゴリID	文字列。利用したい画像（カテゴリ）のIDを指定します。

あらかじめ用意しているアイコン画像は以下の通りです。利用する画像のカテゴリIDを指定してください。

カテゴリID	アイコン画像	カテゴリID	アイコン画像
"L1"		"S1"
"L2"		"S2"
"L3"		"S3"
"L4"		"S4"
"L5"		"S5"

このメソッドはすべてのGeoRSSのデータに適用されます。
GeoRSSのデータを地図上でアイコンを用いて表したいときは、このメソッドでアイコン画像（カテゴリ）を指定する必要があります。

yGeoRSSloadXML(url)

地図上に読み込むGeoRSSデータのURLを指定します。

引数は以下の通りです。

パラメータ	意味	データ型・備考
url	アドレス	文字列。表示したいGeoRSSデータのURLを入力します。

yGeoRSSshowIcon()

GeoRSSのアイコンを地図上に表示します。
yGeoRSSsetCategory()で設定したアイコン画像（カテゴリ）のアイコンに適用されます。

yGeoRSShideIcon()

GeoRSSのアイコンを非表示にします。
yGeoRSSsetCategory()で設定したアイコン画像（カテゴリ）のアイコンに適用されます。

yGeoRSSgetData()

GeoRSSデータを取得します。
戻り値は以下の通りです。
パラメータ意味データ型・備考
obj

GeoRSS情報
オブジェクト型。

このページのトップへ

YLLPointクラス＞メソッド

toString()

YLLPointクラスの緯度経度の文字列形式を返します。
戻り値は以下の通りです。
パラメータ意味データ型・備考
pos

緯度経度
文字列。
度.分.秒形式の緯度経度文字列。
サンプル
※以下のコードをテキストエディタにコピー＆ペーストしてください。

※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】">
</script>
<script type="text/javascript">
window.onload = function() {
   var point0 = new YLLPoint("35.6594806802077", "139.734039092737");
   ymap = new YahooMapsCtrl("map", point0, 3);

   ymap.addEvent(YEventType.MAP_MOVING, map_move);
   ymap.addEvent(YEventType.MAP_MOVED, map_move);
}
function map_move() {
   var point = ymap.getCenter();
   
   var p1 = point.toString();
   var p2 = p1.split(",");

   document.getElementById("lat1").value = p2[0];
   document.getElementById("lon1").value = p2[1];
   document.getElementById("lat2").value = point.lat;
   document.getElementById("lon2").value = point.lon;
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>
<p>度分秒形式<br>
緯度：<input type="text" id="lat1" size="30"><br>
経度：<input type="text" id="lon1" size="30"><br>
</p>
<p>度形式<br>
緯度：<input type="text" id="lat2" size="30"><br>
経度：<input type="text" id="lon2" size="30"><br>
</p>
</body>
</html>

このページのトップへ

リファレンス

目次

一覧表

YahooMapsCtrlクラス

YLLPointクラス

定数

YahooMapsCtrlクラス

YahooMapsCtrlクラス＞コンストラクタ

YahooMapsCtrlクラス＞メソッド＞地図の操作

YahooMapsCtrlクラス＞メソッド＞UI管理

YahooMapsCtrlクラス＞メソッド＞アイコン

YahooMapsCtrlクラス＞メソッド＞位置情報

YahooMapsCtrlクラス＞メソッド＞イベント

YahooMapsCtrlクラス＞メソッド＞ポリライン、ポリゴン

YahooMapsCtrlクラス＞メソッド＞GeoRSS

YLLPointクラス

YLLPointクラス＞コンストラクタ

YLLPointクラス＞プロパティ

YLLPointクラス＞メソッド

定数

YMapMode定数

YDatumType定数

YEventType定数

コンストラクタ一覧

YahooMapsCtrlクラス＞コンストラクタ

YLLPointクラス＞コンストラクタ

メソッド一覧

YahooMapsCtrlクラス＞メソッド＞地図の操作

YahooMapsCtrlクラス＞メソッド＞UI管理

YahooMapsCtrlクラス＞メソッド＞アイコン

YahooMapsCtrlクラス＞メソッド＞位置情報

YahooMapsCtrlクラス＞メソッド＞イベント

YahooMapsCtrlクラス＞メソッド＞ポリライン、ポリゴン

YahooMapsCtrlクラス＞メソッド＞GeoRSS

YLLPointクラス＞メソッド

Web APIとその他のサービス

API

その他

スタッフブログ

開発者コミュニティ

開発のヒント

法人デベロッパー専用お問い合わせ