マニュアル

目次

• 概要
• マニュアル

  地図を表示する サンプル APIを読み込む 地図の埋め込み 地図を表示する 地図を操作する サンプル ボタンを表示または非表示にする 任意の場所に移動する イベントを発生させる サンプル イベントとは イベントに伴う処理を登録する イベントの使い方 イベントを削除する

  アイコンを表示する サンプル アイコンとは アイコンを配置する アイコンの情報を取得する アイコンを削除する ポリライン、ポリゴンを表示する サンプル ポリライン、ポリゴンとは ポリラインを描く ポリゴンを描く ポリライン、ポリゴンを削除する ポリライン、ポリゴンの情報を取得する GeoRSSデータを表示する サンプル GeoRSSとは GeoRSSを地図に読み込む

• サンプルコード集
• リファレンス
• 補足説明

地図を表示する

サンプル

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

APIを読み込む

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

このページのトップへ

地図の埋め込み

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

このページのトップへ

地図を表示する

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

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

このページのトップへ

地図を操作する

サンプル

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

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

このページのトップへ

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

• 表示/非表示を選択できる部品
  • 中心点： setVisibleCentermark()で表示/非表示を切り替えられます。
  • 中心点表示ボタン： setVisibleCentermarkButton()で表示/非表示を切り替えられます。
• ボタンの種類を変更できる部品
  • スライダーバー/縮尺切り替えボタンをsetVisibleSliderbar()で切り替えられます。

このページのトップへ

任意の場所に移動する

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

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

このページのトップへ

イベントを発生させる

サンプル

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

このページのトップへ

イベントとは

• 地図のクリックや移動など、ユーザーが地図上で行うさまざまな動作をした際に発生するものを意味します。
• 地図などに対するイベントの発生に伴って実行する処理を登録できます。
• イベントの種類によっては 緯度経度、アイコン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()で登録した際の戻り値を指定する必要があります。

このページのトップへ

アイコンを表示する

サンプル

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

このページのトップへ

アイコンとは

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

このページのトップへ

アイコンを配置する

• 指定した任意の場所にアイコンを配置できます。
  ※環境によっては、アイコンを多く配置すると動作が重くなることがあります。
• アイコンを配置するためにはaddIcon()を用います。
  引数は以下の通りです。
  

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

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

  カテゴリID	アイコン画像	カテゴリID	アイコン画像
  "L1"		"S1"
  "L2"		"S2"
  "L3"		"S3"
  "L4"		"S4"
  "L5"		"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 = "クリックしたところは、<br>緯度：" + point.lat + "<br>経度：" + point.lon + "<br>です。"; // 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"）のスタイルを指定しなかった場合、ピン画像が中心位置に刺さるように表現できません。
      
    • 地図の中心位置にピンが刺さるように画像を配置するには、スタイルでdxとdyのキーに値を与えることで、画像の位置をずらす必要があります。
      • dx、dyとは
        • dx - アイコンの中心を原点として、右が正（＋）、左が負（−）です。dx の数値分だけ画像を移動させた位置が基準の位置になります。
        • dy - アイコンの中心を原点として、下が正（＋）、上が負（−）です。dy の数値分だけ画像を移動させた位置が基準の位置になります。
      • dx、dyがともに「0」のときは、基準の位置が原点（アイコンの中心）になります。
        例）"L1"のアイコン画像は横24ピクセル、縦24ピクセルなので、{ "width": 24, "height": 24, "dx": 0, "dy": 0 } では次のように配置されます。
        
      • 基準の位置をピンの先にしたいときは、画像をdx方向に12、dy方向に-12ずらします。
        例）{ "width": 24, "height": 24, "dx": 12, "dy": -12 }
        
    • この画像のスタイルを{ "width": 24, "height": 24, "dx": 12, "dy": -12}とした場合、ピン画像が中心位置に刺さるように表現できます。
      
  // まず追加したい画像の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	ラベルの内容

このページのトップへ

アイコンを削除する

• 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()を用います。

このページのトップへ

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

サンプル

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

このページのトップへ

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

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

このページのトップへ

ポリラインを描く

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

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

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

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

  
  

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

• 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 = "ポリライン１"; 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が不透明。

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

• 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）を指定すると、 そのポリライン、ポリゴンを削除できます。

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

このページのトップへ

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

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

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

このページのトップへ

GeoRSSデータを表示する

サンプル

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

GeoRSSとは

• 位置情報（緯度経度）を付したフォーマットを持つRSSサービスです。
• 位置情報を持つことによって、RSSの情報を地図上で利用できます。
• RSS2.0とGeoRSS1.2をサポートしています。
• Yahoo! JAPANではワイワイマップでGeoRSSを配信しています。
• GeoRSSは、XML形式で以下のように記述します。
  • item要素 - 一つのポイントに含まれる情報
  • title要素 - ラベルの内容、吹き出しのタイトル
  • guid要素 - アイコンID
  • description要素 - 吹き出しの内容
  • geo:Point要素 - 位置情報
  • georss:point要素 - 位置情報

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

このページのトップへ

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"		"S1"
    "L2"		"S2"
    "L3"		"S3"
    "L4"		"S4"
    "L5"		"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">

このページのトップへ