YOLP(地図)

リファレンス




このWeb APIは古いバージョンのため、2014年5月31日をもって廃止いたします。新しいYOLP地図APIへの移行をお願いいたします。Yahoo! JavaScriptマップAPI、もしくはYahoo!スタティックマップAPIをご利用ください。

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

目次


一覧表

YahooMapsCtrlクラス

>>「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)
緯度経度を設定します。
緯度と経度を個別の引数として指定する方法です。
引数は以下の通りです。
サンプルがtoString()の項目にあります。
パラメータ意味データ型・備考
lat 緯度 文字列または数値型。
緯度を度形式、度.分.秒形式または度/分/秒形式で指定します。
主な地点の緯度経度はこちら
lon 経度 文字列または数値型。
経度を度形式、度.分.秒形式または度/分/秒形式で指定します。
主な地点の緯度経度はこちら
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" L1 "S1" S1
"L2" L2 "S2" S2
"L3" L3 "S3" S3
"L4" L4 "S4" S4
"L5" L5 "S5" 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" L1 "S1" S1
"L2" L2 "S2" S2
"L3" L3 "S3" S3
"L4" L4 "S4" S4
"L5" L5 "S5" S5
このメソッドはすべてのGeoRSSのデータに適用されます。
GeoRSSのデータを地図上でアイコンを用いて表したいときは、このメソッドでアイコン画像(カテゴリ)を指定する必要があります。
yGeoRSSloadXML(url)
地図上に読み込むGeoRSSデータのURLを指定します。
引数は以下の通りです。
パラメータ意味データ型・備考
url アドレス 文字列。
表示したいGeoRSSデータのURLを入力します。
yGeoRSSshowIcon()
GeoRSSのアイコンを地図上に表示します。
yGeoRSSsetCategory()で設定したアイコン画像(カテゴリ)のアイコンに適用されます。
yGeoRSShideIcon()
GeoRSSのアイコンを非表示にします。
yGeoRSSsetCategory()で設定したアイコン画像(カテゴリ)のアイコンに適用されます。
yGeoRSSgethata()
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>