Yahoo! map JS版 Ver.2 で描く-4

　[戻る]

ここにある ver.2 は廃止されました

Yahoo! map JS版V2 で地図を描く-4

◆GeoRSSデータを表示する

　RSSの情報を Yahoo! map上で表示することができます。　　

RSSとは?　　参考1　参考2　 RSS2.0 Note　書き方　リファレンス
　見出しや要約などのメタデータを構造化して記述するXMLベースのフォーマットです。
GeoRSSとは?。　参考
　GeoRSSとはRSSのフォーマットを拡張して位置情報をRSSフィードに格納する仕組みです。
Yahoo! map の GeoRSS
- RSS2.0とGeoRSS1.2をサポートしています。
- Yahoo! JAPANではワイワイマップでGeoRSSを配信しています。

１.具体例

まず具体例を見てみます。　　動作例

表　示　例	説　明
	まず、Yahoo! map を表示して、
	制御ボタン(1)をクリックして、データを呼び込みます。 XMLファイルを読み込むと、(2)アイコンやラベルが表示可能になります。
	アイコン(3)をクリックして吹き出し(4)を表示することも可能になります。つまり、基本地図ベースを用意して、そこに表示するデータをXMLデーターで任意に切り替えることが可能となります。

２.リストサンプル

具体的な記述の内容です。

( 表　示　例 )	( リ　ス　ト )
	<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <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.586160,139.907189"); ymap = new YahooMapsCtrl("map",point0,8,YMapMode.MAP,YDatumType.WGS84); 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> <input type="text" id="textbox" size="62" value="http://kurage.ready.jp/w_map/map-y2/rss01.xml"> を <input type="button" value="読み込む" id="button"><br> <div id="map" style="width: 500px; height: 360px;"></div> <a href="http://developer.yahoo.co.jp/about"> <img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn2_105_17.gif" width="105" height="17" title="Webサービス by Yahoo! JAPAN" border="0" style="margin:4px 25px 15px 0px;float:left;"></a> </body> </html>
GeoRSSは、XML形式で以下のように記述します。　　参考
◇item - １ポイントに含まれる情報　・title - ラベル内容、吹き出しタイトル　・guid - アイコンID 　・description - 吹き出しの内容　・geo:Point - 位置情報　(注2) 　・georss:point - 位置情報　(注2)	<?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.680929</geo:lat> <geo:long>139.767020</geo:long> </geo:Point> <georss:point>35.680929 139.767020</georss:point> </item> <item> <title>横浜駅</title> <guid>2</guid> <description>横浜市 - 政令指定都市</description> <geo:Point> <geo:lat>35.465698</geo:lat> <geo:long>139.622159</geo:long> </geo:Point> <georss:point>35.465698 139.622159</georss:point> </item> <item> <title>千葉駅</title> <guid>3</guid> <description>千葉市 - 政令指定都市</description> <geo:Point> <geo:lat>35.613867</geo:lat> <geo:long>140.112789</geo:long> </geo:Point> <georss:point>35.613867 140.112789</georss:point> </item> </channel> </rss>
★注意ポイントが３つあります。　　　参考　　※１）アプリケーションIDの取得が必要です。　　※２）GeoRSSの位置座標は、世界測地系(WGS84)です。世界測地系での設定が必要です。　　※３）GeoRSSのXMLファイルはインターネットからアクセスできる場所に設置します。(絶対パスURL)

　Y-map top/ 作る-1/ 作る-2/ 作る-3/ 作る-4/