YOLP(地図)

マニュアル

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

JavaScript版地図APIをウェブページへ埋め込む方法など、基本機能を説明します。


地図を表示する

サンプル

※以下のコードをテキストエディタにコピー&ペーストしてください。
※【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() {
  ymap = new YahooMapsCtrl("map", "35.67832667, 139.77044378", 2);
  }
  </script>
</head>
<body>
  <div id="map" style="width:400px; height:400px;"></div>
</body>
</html>

以下、このサンプルコードを順を追って解説します。

APIを読み込む

本サービスを利用するためには、Yahoo!地図WebサービスのJavaScriptファイルをインクルードする必要があります。【APPID】の部分は、取得していただいたAPPID(アプリケーションID)に置き換えて利用してください。

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

地図の埋め込み

HTML文書の地図を埋め込みたい場所に、以下の例のようにdiv要素で指定します。
div要素のid属性には任意の文字列(ここでは"map")を指定してください。このIDは地図を読み込む際に利用します。
div要素のstyle属性でwidthプロパティ(幅)とheightプロパティ(高さ)に値をそれぞれ指定することで地図の大きさを指定できます。

<body>
<div id="map" style="width:400px; height:400px;"></div>
...
</body>

地図を表示する

地図を表示するためには、YahooMapsCtrlコンストラクタで地図を初期化する必要があります。

  • 地図をYahooMapsCtrlコンストラクタで初期化し、任意の変数(ここではymap)に格納します。
  • 第1引数(idパラメータ)にはdiv要素のid属性で指定した文字列(ここでは"map")を指定してください。
  • 第2引数(posパラメータ)には、初期表示の位置(ホーム位置)の緯度経度を指定できます。
    ※緯度経度の記述の仕方はこちらを参照してください。
    ※省略すると、六本木ヒルズがホーム位置に指定されます。
  • 第3引数(layerパラメータ)には、初期表示の際の縮尺階層を1~11の数値で指定できます。
    ※省略すると、「3」と設定されます。
    ※縮尺について、詳細はこちらを参照してください。
<script type="text/javascript">
   window.onload=function() {
   ymap = new YahooMapsCtrl("map", "35.67832667, 139.77044378", 2);
   }
</script>


地図を操作する

サンプル

※以下のコードをテキストエディタにコピー&ペーストしてください。
※【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 = "35.67832667, 139.77044378";
   ymap = new YahooMapsCtrl("map", point0, 4);

   ymap.setVisibleCentermarkButton(true);
   ymap.setVisibleSliderbar(false);

   document.getElementById("move").onclick = function() {
   ymap.moveTo("35.36046, 138.73198389");
   }
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
<input type="button" id="move" value="富士山に移動する">
</body>
</html>

以下、このサンプルコードを順を追って解説します。

※ マウスやボタンを使った地図の操作の仕方はこちらを参照してください。


ボタンを表示または非表示にする

表示/非表示を選択できる部品

中心点: setVisibleCentermark()で表示/非表示を切り替えられます。
中心点表示ボタン: setVisibleCentermarkButton()で表示/非表示を切り替えられます。

ボタンの種類を変更できる部品

スライダーバー/縮尺切り替えボタンをsetVisibleSliderbar()で切り替えられます。

// 中心点表示ボタンを表示する。
ymap.setVisibleCentermarkButton(true); 
// スライダーバーを非表示にし、縮尺切り替えボタンを表示する。
ymap.setVisibleSliderbar(false);

任意の場所に移動する

moveTo()を用いることで、地図を任意の場所に移動できます。
サンプルでは、HTML文書の任意の場所にボタンを作成し、ボタンにonclickイベントが発生したときにmoveTo()を実行します。

window.onload = function() {
   ……
   // 「富士山に移動する」ボタンがクリックされたときに次の処理を行う。
   document.getElementById("move").onclick = function() {

    // 富士山の緯度経度を引数にとり、ymap.moveTo()を実行する。
   ymap.moveTo("35.36046, 138.73198389");
   }
}
……
<input type="button" id="move" value="富士山に移動する">

※その他、こちらのメソッド(地図の操作)でも地図を操作できます。



イベントを発生させる

サンプル

※以下のコードをテキストエディタにコピー&ペーストしてください。
※【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() {
   ymap = new YahooMapsCtrl("map", "35.67832667, 139.77044378", 3);
   ymap.addEvent(YEventType.MAP_CLICK, map_click);
   event1 = ymap.addEvent(YEventType.MAP_MOVING, map_moving);
   event2 = ymap.addEvent(YEventType.MAP_MOVED, map_moved);
   event3 = ymap.addEvent(YEventType.LAYER_CHANGED, layer_changed);
   document.getElementById("button1").onclick = button1_click;
}
function map_click(point) {
   document.getElementById("center_lat").value = point.lat;
   document.getElementById("center_lon").value = point.lon;
}
function map_moving() {
   var point = ymap.getCenter();
   document.getElementById("comment1").innerHTML = "地図は移動中です。";
   document.getElementById("center_lat").value = point.lat;
   document.getElementById("center_lon").value = point.lon;
}
function map_moved() {
   var point = ymap.getCenter();
   document.getElementById("comment1").innerHTML = "地図は停止中です。";
   document.getElementById("center_lat").value = point.lat;
   document.getElementById("center_lon").value = point.lon;
}
function layer_changed() {
   var layer = ymap.getCurrentLayer();
   document.getElementById("comment2").innerHTML = "現在の縮尺は「" + layer + "」です。";
}
function button1_click() {
   ymap.removeEvent(event1);
   ymap.removeEvent(event2);
   ymap.removeEvent(event3);
   document.getElementById("comment1").innerHTML = "地図の状態を表示しません。";
   document.getElementById("comment2").innerHTML = "地図の縮尺を表示しません。";
   document.getElementById("button").innerHTML = "";
}
</script>
</head>
<body>
<div id="map" style="width:400px; height: 400px;"></div>
<div id="comment1">地図は止まっています。</div>
<div id="comment2">現在の縮尺は「3」です。</div>
<span id="button"><input type="button" id="button1" value="イベント削除(コメントを消す)"></span>
<p>
 クリックした地点は<br>
 緯度:<input type="text" id="center_lat" size="25"><br>
 経度:<input type="text" id="center_lon" size="25">です。
</p>
</body>
</html>

以下、このサンプルコードを順を追って解説します。


イベントとは

地図のクリックや移動など、ユーザーが地図上で行うさまざまな動作をした際に発生するものを意味します。
地図などに対するイベントの発生に伴って実行する処理を登録できます。
イベントの種類によっては 緯度経度、アイコンIDの情報を取得できます。
位置情報を取得するメソッドなどと組み合わせて使うと便利に利用できます(こちらを参照してください。)


イベントに伴う処理を登録する

addEvent()を用いてイベントに伴う処理を登録します。
引数は以下の通りです。

引数 内容 データ型 備考
1 イベント定数 定数 「""」は不要。
YEventType.イベントの種類」と表記。
指定できる項目はこちら
2 処理内容 関数 指定方法の詳細はこちら

第1引数で指定するイベント定数について、次のイベントを用意しています。

説明イベント定数引数
地図をクリックYEventType.MAP_CLICKクリック位置の緯度経度
地図のスクロール中(※)YEventType.MAP_MOVINGなし
地図のスクロールの停止YEventType.MAP_MOVED
地図上にマウスカーソルがあるYEventType.MOUSE_OVERなし
地図からマウスカーソルが外れるYEventType.MOUSE_OUTなし
地図上をマウスカーソルが動くYEventType.MOUSE_MOVEカーソル位置の緯度経度
縮尺を変更YEventType.LAYER_CHANGEDなし
地図の種類を変更YEventType.MODE_CHANGEDなし
アイコンをクリックYEventType.ICON_CLICK対象アイコンのID
アイコンをダブルクリックYEventType.ICON_DBLCLICK対象アイコンのID
アイコン上にマウスカーソルがあるYEventType.ICON_MOUSEOVER対象アイコンのID
アイコンからマウスカーソルが外れるYEventType.ICON_MOUSEOUT対象アイコンのID
アイコンにマウスダウンYEventType.ICON_MOUSEDOWN対象アイコンのID
アイコンにマウスアップYEventType.ICON_MOUSEUP対象アイコンのID
吹き出しが開くYEventType.POPUP_OPEN対象アイコンID
吹き出しが閉じるYEventType.POPUP_CLOSEなし

※MAP_MOVINGイベントは、地図をスクロールしている間、連続的に処理が発生します。

第2引数で指定するイベント発生に伴う処理内容は次のような方法で指定することが可能です。

window.onload = function() {
 ……
   ymap.addEvent(YEventType.MAP_CLICK, map_click);
}
function map_click() {
 alert("地図がクリックされました。");
}

イベントの使い方

イベントを利用してどのようなことができるのかをサンプルでの利用方法をもとに解説します。

YEventType.MAP_CLICK

地図をクリックしたときに処理を実行します。
引数にクリックした地点の緯度経度を持たせられるので、緯度経度情報の処理で利用できます。

window.onload = function() {
 ……
   // 地図をクリックするイベントが発生する(YEventType.MAP_CLICK)と、
   // グローバル関数map_clickを呼び出し、実行する。
   ymap.addEvent(YEventType.MAP_CLICK, map_click);
 ……
}
/* YEventType.MAP_CLICKは緯度経度を引数に持たせられる。
 * ここではmap_click()の引数として変数pointを用意することで
 * 変数pointに緯度経度情報を格納する。       */
function map_click(point) {
   // pointに入っている緯度経度情報の緯度と経度を取り出して表示する。
   document.getElementById("center_lat").value = point.lat;
   document.getElementById("center_lon").value = point.lon;
}

YEventType.MAP_MOVING、YEventType.MAP_MOVED

YEventType.MAP_MOVINGは、地図をスクロールしている間、連続的に処理を実行させます。
YEventType.MAP_MOVEDは、地図のスクロールが終了したときに、一度だけ処理を実行させます。
getCenter()などの位置情報を取得できるメソッドと併せて用いると便利です。

window.onload = function() {
 ……
   // 地図をスクロールしている間(YEventType.MAP_MOVING)、
   // グローバル関数map_movingを繰り返し呼び出す。
   ymap.addEvent(YEventType.MAP_MOVING, map_moving);
   // 地図のスクロールが止まったとき(YEventType.MAP_MOVED)、
   //グローバル関数map_movedを一度だけ呼び出す。
   ymap.addEvent(YEventType.MAP_MOVED, map_moved);
 ……
}
function map_moving() {
   // ymap.getCenter()を実行して、変数pointに
   // 現在の地図の中心の緯度経度を格納する。
   var point = ymap.getCenter();
 ……
   // pointに入っている緯度経度情報の緯度と経度を取り出して表示する。
   document.getElementById("center_lat").value = point.lat;
   document.getElementById("center_lon").value = point.lon;
}
function map_moved() {
   /* map_movingと同様の処理 */
}

YEventType.LAYER_CHANGED

縮尺を変更したとき、変更が完了したときに処理を実行します。
getCurrentLayer()などのメソッドと併せて用いると便利です。

window.onload = function() {
 ……
   // 縮尺の変更が完了したときにグローバル関数layer_changedが呼ばれる。
   ymap.addEvent(YEventType.LAYER_CHANGED, layer_changed);
 ……
}
function layer_changed() {
   // ymap.getCurrentLayer()を実行して、
   // 現在(切り替わった後)の縮尺を取得し、変数layerに格納する。
   var layer = ymap.getCurrentLayer();
   document.getElementById("comment2").innerHTML = "現在の縮尺は「" + layer + "」です。";
}

その他、アイコンについてのイベントも利用できます。こちらを参照してください。


イベントを削除する

地図にしたイベントを発生させたときの処理が不必要になった場合、イベントを削除できます。
イベントを削除する際にはremoveEvent()を使用します。引数にはaddEvent()で登録した際の戻り値を指定する必要があります。

window.onload = function() {
   ……
   // 変数event1にaddEventメソッドの戻り値を格納する。
  event1 = ymap.addEvent(YEventType.MAP_MOVING, map_moving);
 ……
   // buttonがクリックされ、button_click関数が呼ばれる。
   document.getElementById("button1").onclick = button1_click;
}
function map_moving() { …… }
function button1_click() {
   // removeEventメソッドの引数にevent1を指定し、
   //ymap.removeEvent()を実行してイベントハンドラを削除する。
   ymap.removeEvent(event1);
 ……
}
 ……
<span id="button"><input type="button" id="button1" value="イベント削除(コメントを消す)">


アイコンを表示する

サンプル

※以下のコードをテキストエディタにコピー&ペーストしてください。
※【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() {
   point0 = new YLLPoint("35.67832667, 139.77044378");
   ymap = new YahooMapsCtrl("map", point0, 3);

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

   var popup = "ホーム位置<br>35.67832667, 139.77044378";
   var label = "ホーム位置(東京駅)";
   ymap.addIcon("ie1", point0, popup, "home", label);

   ymap.addEvent(YEventType.MAP_CLICK, map_click);

   ymap.addEvent(YEventType.ICON_CLICK, icon_click);

   document.getElementById("geticon").onclick = iconinfo;
}
function map_click(point) {
   n++;
   var popup = "クリックしたところは、<br>緯度:" + point.lat + "<br>経度:" + point.lon + "<br>です。";
   ymap.addIcon("icon"+n, point, popup, "L1");
}
function icon_click(id) {
   ymap.removeIcon(id);
}
function iconinfo() {
   var info = "";
   for (var i=1; i<=n; i++) {
   info += ymap.getIcon("icon" + i).pos + "<br>";
   }
   document.getElementById("icons").innerHTML = info;
}
</script>
</head>
<body>
<div id="map" style="width:400px; height: 400px;"></div>
<input type="button" id="geticon" value="追加したアイコンの緯度緯度の一覧を取得する">
<hr>
<div id="icons"></div>
</body>
</html>

以下、このサンプルコードを順を追って解説します。


アイコンとは

地図上にアイコンを設置することで、地図にマーキングできます。
ラベルやポップアップの吹き出しを表示し、アイコンの詳細情報などを表示できます。
アイコンサンプル画像
アイコン画像はあらかじめ用意しているものを利用するほかに、任意の画像をアイコンとして利用することもできます。詳しくはこちらを参照してください。


アイコンを配置する

指定した任意の場所にアイコンを配置できます。
※環境によっては、アイコンを多く配置すると動作が重くなることがあります。

アイコンを配置するためにはaddIcon()を用います。
引数は以下の通りです。

引数 内容 データ型 備考
1 アイコンID 文字列 アイコンを操作する際に用います。
2 緯度経度 文字列、YLLPointクラス
3 吹き出し内容 文字列 HTMLタグが利用できます。
吹き出しが不要なときは、「""」としてください。
4 カテゴリID 文字列 使う画像(カテゴリ)のIDです。この表の下に掲載する10種類のアイコンから選べます。
※もし省略した場合は"L1"(L1)となります。
5 ラベル内容(省略可) 文字列

あらかじめ用意しているアイコン画像は以下の通りです。利用する画像のカテゴリ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

var n = 0;  // n: クリックした回数(ここではアイコンIDに利用)
window.onload = function() {
 ……
   // 地図をクリックすると、map_click関数が呼ばれる。
   ymap.addEvent(YEventType.MAP_CLICK, map_click);
 ……
}
// クリックした地点の緯度経度が変数pointに格納される。
function map_click(point) {
   n++; 
   // 吹き出しの内容を指定する。
   var popup = "クリックしたところは、
緯度:" + point.lat + "
経度:" + point.lon + "
です。"; // ymap.addIcon()を実行し、アイコンを配置できる。 ymap.addIcon("icon" + n, point, popup, "L1"); }

任意の画像をアイコン画像として使用できます。
addCategory()を用いて任意の画像をアイコン画像として登録します。
引数は以下の通りです。

引数内容データ型備考
1カテゴリID文字列使う画像(カテゴリ)のIDです。アイコンを置くときに使います。
2画像のURL文字列
3表示サイズ(省略可) オブジェクト型ハッシュを用いてサイズや基準の位置を指定します。
※下の表を参照。

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

設定項目内容設定方法
widthピクセル単位。
height高さピクセル単位。
dx基準の位置(横)ピクセル単位。
画像のX方向の移動量です(詳細は以下)。
dy基準の位置(縦)ピクセル単位。
画像のY方向の移動量です(詳細は以下)。

アイコン画像の基準の位置(dx、dy)について

例えば、【登録する画像】の画像を最初からaddCategory()で登録するとき……

この画像("L1")のスタイルを指定しなかった場合、ピン画像が中心位置に刺さるように表現できません。

アイコンのスタイル1

地図の中心位置にピンが刺さるように画像を配置するには、スタイルでdxとdyのキーに値を与えることで、画像の位置をずらす必要があります。

  • dx、dyとは
    • dx - アイコンの中心を原点として、右が正(+)、左が負(−)です。dx の数値分だけ画像を移動させた位置が基準の位置になります。
    • dy - アイコンの中心を原点として、下が正(+)、上が負(−)です。dy の数値分だけ画像を移動させた位置が基準の位置になります。
  • dx、dyがともに「0」のときは、基準の位置が原点(アイコンの中心)になります。
    例)"L1"のアイコン画像は横24ピクセル、縦24ピクセルなので、{ "width": 24, "height": 24, "dx": 0, "dy": 0 } では次のように配置されます。
    「dx:0、dy:0」のとき
  • 基準の位置をピンの先にしたいときは、画像をdx方向に12、dy方向に-12ずらします。
    例){ "width": 24, "height": 24, "dx": 12, "dy": -12 }
    「dx:25、dy:-25」のとき

この画像のスタイルを{ "width": 24, "height": 24, "dx": 12, "dy": -12}とした場合、ピン画像が中心位置に刺さるように表現できます。

アイコンのスタイル2

// まず追加したい画像のURL、スタイルを指定する。
var url = "home.gif";
var style = { "width": 30, "height": 30, "dx": 0, "dy": -15 };

// addCategory()でカテゴリIDを"home"として画像を追加する。
ymap.addCategory("home", url, style);
 ……
// addIcon()で第3引数(カテゴリID)を"home"と指定する。
ymap.addIcon("ie1", point0, popup, "home", label);

○カテゴリとは

カテゴリとは、アイコンを分類するものです。
それぞれのカテゴリに一つずつアイコン画像を登録できます。
あらかじめ登録しているカテゴリは上記の"L1"から"L5"と"S1"から"S5"です。
任意のカテゴリをaddCategory()を用いて追加することもできます。
上の解説では、"home"カテゴリを追加し、そのカテゴリに属するアイコン"ie1"を"home.gif"で表現しています。

○複数のアイコンを同時に配置する

addIcons()を用いることで、複数のアイコンを同時に配置できます。
addIcon()で一つ一つアイコンを配置するよりもaddIcons()を用いたほうが高速でアイコンを配置できます。
引数にはアイコン情報が格納された配列を以下のように指定します。

1. 各アイコンの情報が格納されたオブジェクトを生成します。addIcon()で指定した各引数の情報はオブジェクトのプロパティとして記述します。

var icon1 = new Object();
icon1.id = "p1";
icon1.pos = new YLLPoint("35.00001, 135.00001");
icon1.popup = "1点目";
icon1.type = "L1";
icon1.label = "";
var icon2 = new Object();
……

2. それぞれのオブジェクトをひとつの配列にまとめます。

var icons = new Array();
icons.push(icon1);
icons.push(icon2);
icons.push(icon3);
icons.push(icon4);

3. addIcons()の引数に配列を指定します。

ymap.addIcons(icons);

アイコンの情報を取得する

イベントを用いる

イベントの種類

以下のイベント定数はすべてイベントを発生させたアイコンIDを引数として引き渡せます。

説明イベント定数
アイコンをクリックしたときYEventType.ICON_CLICK
アイコンをダブルクリックしたときYEventType.ICON_DBLCLICK
アイコンの上にマウスカーソルがあるときYEventType.ICON_MOUSEOVER
アイコンからマウスカーソルが外れたときYEventType.ICON_MOUSEOUT
アイコンにマウスダウンしたときYEventType.ICON_MOUSEDOWN
アイコンにマウスアップしたときYEventType.ICON_MOUSEUP
吹き出しが開かれたときYEventType.POPUP_OPEN

YEventType.ICON_CLICKの例

アイコンをクリックしたときに処理を発生させられます。
引数にクリックしたアイコンのIDを持たせられます。
受け取ったアイコンIDを利用して、アイコンを削除したり、アイコン情報を取得することもできます。

window.onload = function() {
 ……
   // アイコンをクリックすると(YEventType.ICON_CLICK)、
   // グローバル関数icon_clickを呼び出し、実行する。
   ymap.addEvent(YEventType.ICON_CLICK, icon_click);
 ……
}
/* YEventType.ICON_CLICKはアイコンIDを引数に持たせられる。
 * ここではicon_click()の引数として変数idを用意することで
 * 変数idにアイコンIDを持たせられる。       */
function icon_click(id) {
   ymap.removeIcon(id);
}

メソッドを用いる

getIcon()を利用すれば、引数で指定したアイコンIDについての以下の情報が取得できます。

パラメータ説明
idアイコンID
pos緯度経度情報YLLPointクラス
popup吹き出しの内容
typeカテゴリID
labelラベルの内容

var n = 0;
window.onload = function() {
 ……
   // アイコンクリックのイベント発生でicon_click関数が呼ばれる。
   ymap.addEvent(YEventType.ICON_CLICK, icon_click);

   // buttonボタンクリックのイベント発生でiconinfo関数が呼ばれる。
   document.getElementById("geticon").onclick = iconinfo;
}
// 変数idにクリックされたアイコンのIDが格納されます。
function icon_click(id) {
 ……
}
function iconinfo() {
   var info = "";
   for (var i = 1; i <= n; i++) {
   // 変数infoの中に次々とiconの吹き出しの情報が格納される。
   // ymap.getIcon(id).posで指定したアイコンIDのpopupを取得できる。
   info += ymap.getIcon("icon" + i).pos + "<br>";
   }
   // idがiconsの場所に変数infoの内容が書き込まれる。
   document.getElementById("icons").innerHTML = info;
}
 ……
<div id="icons"></div>

アイコンを削除する

removeIcon()の引数にアイコンIDを指定すると、そのアイコンを削除できます。

window.onload = function() {
 ……
   // アイコンをクリックするとicon_click関数を呼び出す。
   ymap.addEvent(YEventType.ICON_CLICK, icon_click);
 ……
}
function icon_click(id) {
   // 変数idに格納されたアイコンIDを用いて
   // ymap.removeIcon()を実行し、アイコンを削除する。
   ymap.removeIcon(id);
}

clearIcon()を用いると、すべてのアイコンを一括して削除することもできます。 ただし、カテゴリは削除しません。カテゴリを削除する場合には、removeCategory()を用います。



ポリライン、ポリゴンを表示する

サンプル

※以下のコードをテキストエディタにコピー&ペーストしてください。
※【APPID】の部分は、各自取得していただいたアプリケーションIDに置き換えてください。

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

   obj1.id = "p1";
   obj1.popup = "<font size=\"-1\"><b>六本木ヒルズ</b>から<br><b>東京ミッドタウン</b></font>";
   obj1.style = { "strokeWidth": 10, "strokeColor": "00ffff", "strokeOpacity": 1 };
   obj1.pos = new Array();
   obj1.pos.push(new YLLPoint("35.65823001066274", "139.73242475013626"));
   obj1.pos.push(new YLLPoint("35.65869069352878", "139.73243586758417"));
   obj1.pos.push(new YLLPoint("35.66005466054928", "139.73535975637992"));
   obj1.pos.push(new YLLPoint("35.66164442052155", "139.73345867279067"));
   obj1.pos.push(new YLLPoint("35.66213218144044", "139.7340812498726"));
   make_polyline();

   obj2.id = "p2";
   obj2.popup = "六本木ヒルズ";
   obj2.style = { "strokeWidth": 5, "strokeColor": "ff9900", "strokeOpacity": 1, "fillColor": "ffcc00", "fillOpacity": 0.4 };
   obj2.pos = new Array();
   obj2.pos.push(new YLLPoint("35.65749205882447", "139.73196512997"));
   obj2.pos.push(new YLLPoint("35.65741979393659", "139.7310868515866"));
   obj2.pos.push(new YLLPoint("35.65708556797948", "139.73176501590797"));
   obj2.pos.push(new YLLPoint("35.65667907506546", "139.73150931460646"));
   obj2.pos.push(new YLLPoint("35.65696813690572", "139.73216524403205"));
   obj2.pos.push(new YLLPoint("35.65677844019106", "139.7327211164266"));
   obj2.pos.push(new YLLPoint("35.65719396574043", "139.7324542976772"));
   obj2.pos.push(new YLLPoint("35.657564323646966", "139.73287676069708"));
   obj2.pos.push(new YLLPoint("35.6575281912439", "139.7323542406462"));
   obj2.pos.push(new YLLPoint("35.65803404339929", "139.73203183465733"));
   make_polygon();

   document.getElementById("polyline").onclick = polyline_onclick;
   document.getElementById("polygon").onclick = polygon_onclick;
   document.getElementById("both").onclick = both_onclick;
   document.getElementById("button").onclick = button_onclick;
}
function make_polyline() {
   ymap.addPolyline(obj1.id, obj1.pos, obj1.popup, obj1.style);
}
function make_polygon() {
   ymap.addPolygon(obj2.id, obj2.pos, obj2.popup, obj2.style);
}

function polyline_onclick() {
   var i = ymap.getVectorObject(obj1.id);
   if (i) {
   ymap.removeVectorObject(obj1.id);
   } else {
   make_polyline();
   }
}
function polygon_onclick() {
   var i = ymap.getVectorObject(obj2.id);
   if (i) {
   ymap.removeVectorObject(obj2.id);
   } else {
   make_polygon();
   }
}
function both_onclick() {
   var i = ymap.getVectorObject(obj1.id);
   var j = ymap.getVectorObject(obj2.id);
   if (i || j) {
   ymap.clearVectorObject();
   } else {
   make_polyline();
   make_polygon();
   }
}

function button_onclick() {
   var i = ymap.getVectorObject(obj1.id);
   var j = ymap.getVectorObject(obj2.id);
   var line_color1 = "";
   var line_color2 = "";

   if (!i) {
   line_color1 = "ポリラインがありません";
   } else {
   line_color1 = "#" + ymap.getVectorObject(obj1.id).style.strokeColor;
   }
   if (!j) {
   line_color2 = "ポリゴンがありません";
   } else {
   line_color2 = "#" + ymap.getVectorObject(obj2.id).style.strokeColor;
 }
   alert("ポリラインの色: " + line_color1 + "\n" + "ポリゴンの線の色:" + line_color2);
}

</script>
</head>

<body>
<div id="map" style="width: 400px; height: 400px;"></div>
<input type="button" id="polyline" value="ポリラインを描く/消す">
<input type="button" id="polygon" value="ポリゴンを描く/消す">
<input type="button" id="both" value="両方を描く/消す"><br>
<input type="button" id="button" value="ポリライン、ポリゴンの線の色を取得する">

</body>
</html>

以下、このサンプルコードを順を追って解説します


ポリライン、ポリゴンとは

地図上に折れ線(ポリライン)、多角形(ポリゴン)を描けます。
ポリラインやポリゴンに対してポップアップの吹き出しを持たせられ、そこに詳細情報を表示できます。
ポリラインは以下のような折れ線を地図上に描けます(線の太さや色などは自由に指定できます)。
ポリラインのサンプル
ポリゴンは以下のような多角形を地図上に描けます(線の太さや色などは自由に指定できます)。
ポリゴンのサンプル


ポリラインを描く

addPolyline()を用いることで、指定した任意の場所にポリラインを描けます。
addPolyline()の引数は以下の通りです。

引数 内容 データ型 備考
1 オブジェクトID 文字列 ポリライン(ポリゴン)を操作する際に用います。
※ポリラインとポリゴンで同じ値を設定すると、新しく作成したオブジェクトに上書きされてしまいます。
2 緯度経度 YLLPointクラスの配列
3 吹き出し内容 文字列 HTMLタグが利用できます。
吹き出しが不要のときは、「""」としてください。
4 スタイル(省略可) オブジェクト型 ハッシュを用いてスタイルを指定します。設定できる項目は以下の通りです。

addPolyline()の第4引数で指定できるポリラインのスタイルは次のように指定します。
例){ "strokeWidth": 3, "strokeColor": "00ff00", "strokeOpacity": 1 };

設定項目内容設定方法
strokeWidth線の太さピクセル単位。
strokeColor線の色カラーコード(「#」不要)。
主なカラーコードはこちら
strokeOpacity線の透明度0~1で指定。0が透明、1が不透明。

// オブジェクトobj1を作り、obj1のプロパティとしてポリラインの要素を格納する。
// ここでは後に他の関数で呼び出すことになるのでグローバル変数で指定する。
var obj1 = new Object();
window.onload = function() {
 ……
   // ポリラインの要素を指定する。
   obj1.id = "p1";
   obj1.popup = "<font size=\"-1\"><b>六本木ヒルズ</b>から<br><b>東京ミッドタウン</b></font>";
   obj1.style = { "strokeWidth": 10, "strokeColor": "00ffff", "strokeOpacity": 1 };

   // 緯度経度情報が格納される配列を指定し、Array.push()を用いて情報を格納する。
   obj1.pos = new Array();
   obj1.pos.push(
   new YLLPoint("35.65823001066274", "139.73242475013626")
   );
 ……
   obj1.pos.push(
   new YLLPoint("35.66213218144044", "139.7340812498726")
   );
   make_polyline();
 ……
}
// それぞれの要素を引数に指定し、ymap.addPolyline()を実行する。
function make_polyline() {
   ymap.addPolyline(obj1.id, obj1.pos, obj1.popup, obj1.style);
}

○複数のポリラインを同時に描く

addPolylines()を用いることで、複数のポリラインを描けます。
addPolyline()で一つ一つポリラインを追加するよりも、addPolylines()を用いたほうが高速で描けます。
引数にはポリライン情報が格納された配列を以下のように指定します。

1. 各ポリラインの情報が格納されたオブジェクトを生成します。addPolyline()で指定した各引数の情報はオブジェクトのプロパティとして記述します。

var points = new Array();
points.push(new YLLPoint("35, 135"));
points.push(new YLLPoint("35.00001, 135.00001"));
  ……
var polyline1 = new Object();
polyline1.id = "p1";
polyline1.pos = points;
polyline1.popup = "ポリライン1";
polyline1.style = { "strokeWidth": 10, "strokeColor": "00ffff", "strokeOpacity": 1 };
var polyline2 = new Object();
  ……

2. それぞれのオブジェクトをひとつの配列にまとめます。

var polylines = new Array();
polylines.push(polyline1);
  ……
polylines.push(polyline4);

3. addPolylines()の引数に配列を指定します。

ymap.addPolylines(polylines);

ポリゴンを描く

addPolygon()を用いることで、指定した任意の場所にポリゴンを描けます。
addPolygon()の引数は以下の通りです。

引数 内容 データ型 備考
1 オブジェクトID 文字列 ポリゴン(ポリライン)を操作する際に用います。
※ポリラインとポリゴンで同じ値を設定すると、新しく作成したオブジェクトに上書きされてしまいます。
2 緯度経度 YLLPointクラスの配列
3 吹き出し内容 文字列 HTMLタグが利用できます。
吹き出しが不要のときは、「""」としてください。
4 スタイル(省略可) オブジェクト型 ハッシュを用いてスタイルを指定します。設定できる項目は以下の通りです。

addPolygon()の第4引数で指定できるポリゴンのスタイルは次のように指定します。
例){ strokeWidth: 3, strokeColor: "00ff00", strokeOpacity: 1, fillColor: "0000ff", fillOpacity: 0.5 };

設定項目内容設定方法
strokeWidth線の太さピクセル単位。
strokeColor線の色カラーコード(「#」不要)。
主なカラーコードはこちら
strokeOpacity線の透明度0から1で指定。0が透明、1が不透明。
fillColor塗りつぶしの色カラーコード(「#」不要)。
主なカラーコードはこちら
fillOpacity塗りつぶしの透明度0から1で指定。0が透明、1が不透明。

// オブジェクトobj2を作り、obj2のプロパティとしてポリゴンの要素を格納する。
// ここでは後に他の関数で呼び出すことになるのでグローバル変数で指定する。

var obj2 = new Object();
window.onload = function() {
 ……
   // ポリゴンの要素を指定する。
   obj2.id = "p2";
   obj2.popup = "六本木ヒルズ";
   obj2.style = { "strokeWidth": 5, "strokeColor": "ff9900", 
   "strokeOpacity": 1, "fillColor": "ffcc00", "fillOpacity": 0.4 };

   // 緯度経度情報が格納される配列を指定し、Array.push()を用いて情報を格納する。
   obj2.pos = new Array();
   obj2.pos.push(
   new YLLPoint("35.65749205882447", "139.73196512997")
   );
 ……
   obj2.pos.push(
   new YLLPoint("35.65803404339929", "139.73203183465733")
   );
   make_polygon();
 ……
}
// それぞれの要素を引数に指定し、ymap.addPolygon()を実行する。
function make_polygon() {
   ymap.addPolygon(obj2.id, obj2.pos, obj2.popup, obj2.style);
}

○複数のポリゴンを同時に描く

addPolygons()を用いることで、複数のポリゴンを描けます。
addPolygon()で一つ一つポリゴンを追加するよりも、addPolygons()を用いたほうが高速で描けます。
引数にはポリゴン情報が格納された配列を以下のように指定します。

1. 各ポリゴンの情報が格納されたオブジェクトを生成します。addPolygon()で指定した各引数の情報はオブジェクトのプロパティとして記述します。

var points = new Array();
points.push(new YLLPoint("35, 135"));
points.push(new YLLPoint("35.00001, 135.00001"));
 ……
var polygon1 = new Object();
polygon1.id = "p1";
polygon1.pos = points;
polygon1.popup = "ポリゴン1";
polygon1.style = { "strokeWidth": 5, "strokeColor": "ff9900", "strokeOpacity": 1, "fillColor": "ffcc00", "fillOpacity": 0.4 };
var polygon2 = new Object();
 ……

2. それぞれのオブジェクトをひとつの配列にまとめます。

var polygons = new Array();
polygons.push(polygon1);
 ……
polygons.push(polygon4);

3. addPolygons()の引数に配列を指定します。

ymap.addPolygons(polygons);

ポリライン、ポリゴンを削除する

removeVectorObject()の引数にオブジェクトID(ポリラインまたはポリゴンのID)を指定すると、そのポリライン、ポリゴンを削除できます。

var obj1 = new Object();
var obj2 = new Object();
window.onload = function() {
 ……/* ポリラインの要素の追加 */……
   make_polyline();
 ……/* ポリゴンの要素の追加*/……
   make_polygon();

   // polylineボタンをクリックしてpolyline_onclick関数を呼ぶ。
   // polygonもbothも同様。
   document.getElementById("polyline").onclick = polyline_onclick;
   document.getElementById("polygon").onclick = polygon_onclick;
   document.getElementById("both").onclick = both_onclick;
 ……
}
function make_polyline() { ……/* ポリラインの作成 */…… }
function make_polygon() { ……/* ポリゴンの作成 */…… }

function polyline_onclick() {
   var i = ymap.getVectorObject(obj1.id);
   if (i) {
   // obj1.idのポリライン、ポリゴンが存在する場合、obj1.idを
   // 引数に取り、ymap.removeVectorObjectを実行し、ポリライン、ポリゴンを消す。
   ymap.removeVectorObject(obj1.id);
   } else {
   // obj1.idのポリライン、ポリゴンが存在しない場合はポリライン生成。
   make_polyline();
   }
}
function polygon_onclick() {
 ……/* polyline_onclick()と同様 */
}
function both_onclick() {
   var i = ymap.getVectorObject(obj1.id);
   var j = ymap.getVectorObject(obj2.id);
   if (i || j) {
   /* ポリラインまたはポリゴンが存在するとき、
    * ymap.clearVectorObjectを実行し、すべてのポリラインと
    * ポリゴンを削除する。         */
   ymap.clearVectorObject();
   } else {
   make_polyline();
   make_polygon();
   }
}

clearVectorObject()で一括でポリライン、ポリゴンを削除することもできます。


ポリライン、ポリゴンの情報を取得する

getVectorObject()を利用すれば、引数で指定したオブジェクトIDについて以下の情報が取得できます。

パラメータ説明
idオブジェクトID
kindポリライン、ポリゴンのどちらか
pos緯度経度情報YLLPointクラスの配列)
popup吹き出しの内容
style定義されたスタイルの内容

window.onload = function() {
 ……
   document.getElementById("button").onclick = button_onclick;
}
function button_onclick() {
  ……
 // ymap.getVectorObject(obj1.id)を実行してポリライン、ポリゴンの情報を
 // 取得する。線の色を取得するには、「.style.strokeColor」とする。
 line_color1 = "#" + ymap.getVectorObject(obj1.id).style.strokeColor;
  ……
}
 ……
<input type="button" id="button" value="ポリライン、ポリゴンの線の色を取得する">


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() {
   var point0 = new YLLPoint("37.40834666405165, 138.80361130017113");
   ymap = new YahooMapsCtrl("map", point0, 10);

   ymap.yGeoRSS(callbackRSSdata);
   ymap.yGeoRSSsetCategory("L3");

   document.getElementById("button").onclick = button_click;
}
function button_click() {
   var url = document.getElementById("textbox").value;
   ymap.yGeoRSSloadXML(url);
}
function callbackRSSdata() {
 alert("地図の読み込みが完了しました!");
}
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
<input type="text" id="textbox" size="40" value="http://waiwai.map.yahoo.co.jp/rss/map/index.xml?mid=rtm&cc=jp">を<input type="button" value="読み込む" id="button"><br>
<!-- 上記URLはワイワイマップ(全国版)の新着20件を表示するGeoRSS -->
</body>
</html>

以下、このサンプルコードを順を追って解説します。

GeoRSSとは

位置情報(緯度経度)を付したフォーマットを持つRSSサービスです。
位置情報を持つことによって、RSSの情報を地図上で利用できます。
RSS2.0GeoRSS1.2をサポートしています。
Yahoo! JAPANではワイワイマップでGeoRSSを配信しています。
GeoRSSは、XML形式で以下のように記述します。

  • item要素 - 一つのポイントに含まれる情報
  • title要素 - ラベルの内容、吹き出しのタイトル
  • guid要素 - アイコンID
  • description要素 - 吹き出しの内容
  • geo:Point要素 - 位置情報
  • georss:point要素 - 位置情報
<?xml version="1.0" encoding="euc-jp"?>
<rss version="2.0"
   xmlns:georss="http://www.georss.org/georss"
   xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
   xmlns:ygeorss="http://map.yahoo.co.jp/ygeorss"
   xmlns:media="http://search.yahoo.com/mrss"
>
<channel>
   <item>
   <title>東京</title>
   <guid>1</guid>
   <description>東京都 - 日本の首都</description>
   <geo:Point>
   <geo:lat>35.68557543680349</geo:lat>
   <geo:long>139.69934524640252</geo:long>
   </geo:Point>
   <georss:point>35.68557543680349 139.69934524640252</georss:point>
   </item>
   <item>
   <title>横浜</title>
   <guid>2</guid>
   <description>横浜市 - 政令指定都市</description>
   <geo:Point>
   <geo:lat>35.471279308599755</geo:lat>
   <geo:long>139.62930532468727</geo:long>
   </geo:Point>
   <georss:point>35.471279308599755 139.62930532468727</georss:point>
   </item>
   <item>
   <title>千葉市</title>
   <guid>3</guid>
   <description>千葉市 - 政令指定都市</description>
   <geo:Point>
   <geo:lat>35.60697638334842</geo:lat>
   <geo:long>140.119584776694</geo:long>


   </geo:Point>
   <georss:point>35.60697638334842 140.119584776694</georss:point>
   </item>
</channel>
</rss>

上記サンプルを地図に読み込むと次のように表示されます。

GeoRSSのサンプル

GeoRSSを地図に読み込む

GeoRSSの初期化

  • onloadのタイミングで、yGeoRSS()を呼び出してください。
    ※他のGeoRSS関連のメソッドが呼び出される前にyGeoRSS()を実行する必要があります。
  • yGeoRSS()の引数には、GeoRSSの読み込みが完了したときに実行する処理を指定します。
    関数名や処理内容を記述します。処理が不必要な場合には引数は省略してください。
window.onload = function() {
  ……
   /* GeoRSSを初期化し、GeoRSSが読み込まれたときに
 * 関数callbackRSSdataを呼ぶ。
 * なお、yGeoRSS()は他のGeoRSS関連のメソッドより先に記述する。 */
   ymap.yGeoRSS(callbackRSSdata);
 ……
}
// GeoRSSが読み込まれたときに処理をする関数callbackRSSdata
function callbackRSSdata() {
 ……
}

取得したGeoRSSのデータを表示するアイコン画像の指定

  • GeoRSSを読み込んだ際に登録されている地点をアイコンで表示するためには、アイコン画像(カテゴリ)を指定する必要があります。
  • 表示するアイコン画像を指定するためには、yGeoRSSsetCategory()を用います。
  • このメソッドはすべてのGeoRSSのデータに適用されます。
  • あらかじめ用意しているアイコン画像は以下の通りです。
カテゴリID アイコン画像 カテゴリID アイコン画像
"L1" L1 "S1" S1
"L2" L2 "S2" S2
"L3" L3 "S3" S3
"L4" L4 "S4" S4
"L5" L5 "S5" S5

window.onload = function() {
 ……
   ymap.yGeoRSS(rssdata);
   // GeoRSSを読み込むと、L3の画像でアイコンを表示する。
   ymap.yGeoRSSsetCategory("L3");
 ……
}

※addIcon()などで追加した通常のアイコンとは異なるアイコン画像(カテゴリID)を指定するのが便利です。同じアイコン画像を指定していた場合、yGeoRSSshowIcon()yGeoRSShideIcon()を用いた際に、通常のアイコンにも適用されてしまいます。

読み込むGeoRSSのURLの指定

  • yGeoRSSloadXML()を用います。
  • yGeoRSSloadXML()の引数には読み込むGeoRSSのURLを指定します。
  • URLは絶対パスを指定してください。
window.onload = function() {
 ……
   // 「読み込む」ボタンクリックでbutton_click関数を呼び出す。
   document.getElementById("button").onclick = button_click;
}
function button_click() {
   // テキストボックスからURLを取得し、ymap.yGeoRSSloadXML()を
   // 実行してGeoRSSを読み込む。
   var url = document.getElementById("textbox").value;
   ymap.yGeoRSSloadXML(url);
}
<!-- ここではテキストボックスからURLを読み込む。 -->
<!-- 下の「->」は便宜上の改行であり、実際には改行しない。 -->
<input type="text" id="textbox" size="40"
   value="http://waiwai.map.yahoo.co.jp
     ->   /rss/map/index.xml?mid=rtm&cc=jp"
>を<input type="button" value="読み込む" id="button">