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

　[戻る]

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

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

◆準備作業等

Yahoo! map API を利用するには、利用ガイドに従う必要があります。
Yahoo! map API で地図表示にはアプリケーションIDが必要です
Yahoo! mapに貼り付けるアプリケーションIDを取得(無料)します。
Yahoo! JAPAN IDがない場合は、Yahoo! JAPAN IDの取得からする必要があります。
Yahoo! mapを表示するときはクレジットを表示する必要があります。

◆Yahoo!Map JS v2を表示してみる

地図表示の基本
1. APIを読み込む
  Yahoo!地図WebサービスのJavaScriptファイルをインクルードします。
  【APPID】の部分は、取得した（アプリケーションID）に置き換えます。 <script type="text/javascript" src="http://map.yahooapis.jp/MapsService/js/V2/?appid=【APPID】"></script><script type="text/javascript">
2. 地図の埋め込み
  HTML文書の地図表示箇所に、下の例のようにdiv要素などにid属性を設けて指定します。
  id属性には任意の文字列（ここでは"map"）を指定します。このIDで読み込む箇所を識別します。
  要素のstyle属性でwidth（幅）とheight（高さ）をそれぞれ指定して地図の大きさを決めます。
  <div id="map" style="width:300px; height:250px"></div>
3. 地図を表示する
  地図表示には、YahooMapsCtrlコンストラクタで地図を初期化し、任意変数（ここではymap）に格納します。
  ・第1引数（idパラメータ）には、要素にid属性で指定した文字列（ここでは"map"）を指定します。
  ・第2引数（posパラメータ）には、地図の初期表示位置（ホーム位置）の緯度経度を指定します。
  　　　　TOKYO97 緯度経度を取得　　 WGS84 緯度経度を取得
  ・第3引数（layerパラメータ）には、初期表示の際の縮尺階層を1～11の数値で指定します。 ymap = new YahooMapsCtrl("map","35.678327,139.770444",4);
4. クレジットを表示する
  Yahoo Maps API の利用ガイドにあるように、Yahoo Maps API を使って地図を表示するときは、クレジットを表示しなければなりません。
  　要請に従った次のようなクレジットを付け加えます。 <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 15px;float:left;"></a>
地図表示の基本ページリスト
　　以上をまとめて記述すると、ページリストは次のようになります。 <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.678327,139.770444",4); } </script> </head> <body> <div id="map" style="width:300px; height:250px"></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 15px;float:left;"></a> </body> </html>

　　　●上記リストの実際の地図は次のようになります。

ymap = ("map","35.678327,139.770444",4)

ymap = ("map2","35.678327,139.770444",4,
YMapMode.AERO,YDatumType.WGS84)

○地図の表示パラメータの設定

地図の表示するYahooMapsCtrlコンストラクタの詳細は、次のようになります。

 ymap = new YahooMapsCtrl(id, pos, layer, mode, datum);

 ymap = new YahooMapsCtrl("ymap","35.678327,139.770444",4,YMapMode.MAP,YDatumType.TOKYO97);

パラメータ	意　味	例
id	ID属性。HTML Element（タグ名）のIDを指定	"ymap"
pos	緯度と経度とを度形式、度.分.秒形式⁺又は度/分/秒形式で指定	"35.678327,139.770444"
layer	縮尺、1～11で設定	4
mode	地図の種類。YMapMode.MAP (省略可)、YMapMode.AERO	YMapMode.MAP
datum	測地系。YDatumType.TOKYO97 (省略可)、YDatumType.WGS84^*	YDatumType.TOKYO97

* Google map や携帯電話では、「WGS84」が使われています。
+ 携帯電話では、度.分.秒形式が使われています。

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