YOLP(地図)

Flash版地図

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

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

Flash地図コンテンツのHTMLへの埋め込み

Flash地図コンテンツをHTMLに埋め込むためには、<object> <embed>タグを両方指定します。Flash地図コンテンツのダウンロード時は、以下のようにappidを指定してください。この例では、サンプル用のappidを使っています。appidの詳細はこちらをご覧ください。なお、appidが正しく設定されていない場合は、日本地図のみを表示するFlash地図コンテンツがダウンロードされます。


http://map.yahooapis.jp/MapsService/Flash/V1/?appid=YahooDemo

Flash地図コンテンツのページ内での位置や大きさなどは、<object>タグを囲む<div>タグのCSSで指定します。なお、<object> <embed>タグ内のwidth,height属性は必ず100%と指定します。

<object>タグのidと<embed>タグのnameは同じ値を設定してください。この値は、メソッド呼び出しの際に使用します。

<div id="mapdiv" style="width:800px;height:350px;border:solid 1px">
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=8,0,0,0" 
    width="100%" height="100%" id="YFMap" align="middle">
   <param name="allowScriptAccess" value="always" />
   <param name="movie"
              value="http://map.yahooapis.jp/MapsService/Flash/V1/?appid=YahooDemo" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
   <embed src="http://map.yahooapis.jp/MapsService/Flash/V1/?appid=YahooDemo"
    quality="high" bgcolor="#ffffff" width="100%" height="100%" 
    name="YFMap" align="middle" allowScriptAccess="always" 
    type="application/x-shockwave-flash" 
    pluginspage="http://www.macromedia.com/go/getflashplayer" />
   </object>
</div>


地図を操作する

地図は、マウスドラッグによるスクロールやマウスホイールによる縮尺切り替えの操作が可能です。また、シフトキーを押しながらマウスホイールを使うことで、地図が45度ずつ回転します。



初期設定パラメータの指定

Flash地図コンテンツをHTMLに埋め込む際、初期設定パラメータを指定することで、Flash地図コンテンツの動作を制御できます。初期設定パラメータの詳細はこちらをご覧ください。 指定は以下の2箇所で行います。

<object>タグ以下に<param>タグで記述します

name属性に「flashvars」、value属性に設定したいパラメータを指定します。パラメータを複数記述する場合は&で区切って記述します。

<embed>タグ内で記述します

flashvars属性に設定したいパラメータを指定します。パラメータを複数記述する場合は&で区切って記述します。

<div id="mapdiv" style="width:800px;height:350px;border:solid 1px">
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=8,0,0,0" 
    width="100%" height="100%" id="YFMap" align="middle">
   <param name="allowScriptAccess" value="always" />
   <param name="movie"
              value="http://map.yahooapis.jp/MapsService/Flash/V1/?appid=YahooDemo" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
   <param name="flashvars"
              value="pos=35/39/45.35,139/43/63.46&layer=2&mode=map" />
   <embed src="http://map.yahooapis.jp/MapsService/Flash/V1/?appid=YahooDemo"
    quality="high" bgcolor="#ffffff" width="100%" height="100%" 
    name="YFMap" align="middle" allowScriptAccess="always" 
    type="application/x-shockwave-flash" 
    pluginspage="http://www.macromedia.com/go/getflashplayer" 
    flashvars="pos=35/39/45.35,139/43/63.46&layer=2&mode=map" />
   </object>
</div>


メソッドの記述方法

JavaScriptの任意の場所に以下の関数を用意し、movieNameにYahooFlashMapオブジェクトidを指定して呼び出します。メソッドの詳細はこちらをご覧ください。

function thisMovie(movieName) {
   if (navigator.appName.indexOf("Microsoft") != -1) {
      return window[movieName]
   }else {
      return document[movieName]
   }
}

<!-- 呼び出し例  -->
thisMovie('YFMap').moveTo('35/39/45.35','139/43/63.46');


イベント処理の記述方法

YahooFlashMapオブジェクトが発行するイベントをJavaScriptで補足して処理するためには、 イベントハンドラをJavaScriptの任意の場所にグローバル関数で用意します。 そして、FlashコンテンツをHTMLに埋め込む際、flashvarsパラメータにイベント名とイベントハンドラを指定します。指定するイベントが複数ある場合は、イベントとイベントを&で区切って指定します。

function myInitialized(){
   alert("initialized");
}

function myMapMoved(lat,lon){
   alert("mapMoved: lat=" + lat + ",lon=" + lon);
}

<object>
   <param name="flashvars"
          value="initialized=myInitialized&mapMoved=myMapMoved"/>
   <embed flashvars="initialized=myInitialized&mapMoved=myMapMoved"/>
</object>


アイコン・吹き出し表示

以下の例では、地図上の中心位置にアイコンを表示します。また、アイコンをマウスオーバーすると吹き出しが表示されます。

var cnt = 0;
function putIcon(){
   var popup='<a href="http://www.yahoo.co.jp/" target="_blank"><u>sample popup</u></a>';
   var lat = thisMovie('YFMap').getCenter().lat;
   var lon = thisMovie('YFMap').getCenter().lon;
   thisMovie('YFMap').addIcon('mid'+cnt,lat,lon,popup,'L1');
   cnt ++;
}

putIcon()関数の1行目では、吹き出しの内容を指定しています。このようにHTMLを直接記述することが可能です。

2,3行目では、地図中心位置の緯度経度を取得しています。

指定した位置にアイコンを表示するために、addIconメソッドを呼び出しています。addIconメソッドの引数は以下になります。

  • 第1引数は任意の文字列が使用可能なIDを指定します。
  • 第2,3引数はアイコンを表示する位置を緯度経度で指定します。
  • 第4引数は吹き出しの内容を指定します。
  • 第5引数はアイコンの種類を指定します。



ルート再生

あらかじめルート再生用のXMLファイルを用意することで、地図上でルートを再生できます。ルートを再生するには、Flash地図コンテンツをHTMLに埋め込む際、flashvarsパラメータ(routexml)に ルート再生用XMLファイル(POIX)のパスを記述します。これにより、Flash地図コンテンツは、ルート再生モードになります。この際、クロスドメインの指定が必要になります。flashvarsパラメータ(crossDomain)に指定したいcrossdomain.xmlのURLを記述します。

ルート再生モードでは、地図上部に再生コントローラアイコンが、ルートの始点と終点にそれぞれアイコンを表示し、初期表示位置がルートの始点となります。

<div id="mapdiv" style="width:800px;height:350px;border:solid 1px">
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=8,0,0,0" 
    width="100%" height="100%" id="YFMap" align="middle">
   <param name="allowScriptAccess" value="always" />
   <param name="movie"
              value="http://map.yahooapis.jp/MapsService/Flash/V1/?appid=YahooDemo" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
   <param name="flashvars"
              value="routexml=route.poi&crossDomain0=crossdomain.xml&
                        pos=35/39/45.35,139/43/63.46&layer=2&mode=map" />
   <embed src="http://map.yahooapis.jp/MapsService/Flash/V1/?appid=YahooDemo"
    quality="high" bgcolor="#ffffff" width="100%" height="100%" 
    name="YFMap" align="middle" allowScriptAccess="always" 
    type="application/x-shockwave-flash" 
    pluginspage="http://www.macromedia.com/go/getflashplayer" 
    flashvars="routexml=route.poi&crossDomain0=crossdomain.xml&
                   pos=35/39/45.35,139/43/63.46&layer=2&mode=map" />
   </object>
</div>


ルート再生用XMLファイル(POIX)仕様

ルート再生用のファイルは、http://www.w3.org/TR/poix/(外部リンク)に準拠していますが、 制限事項として、測地系はTokyo97のみ対応、緯度経度のunitのdmsは、POIXの仕様上、","区切りとなります。

<poix version="2.0">
  <format>
    <datum>tokyo</datum>	<!-- 測地系はTokyo97のみ対応-->
    <unit>dms</unit>		<!-- 緯度経度の単位は仕様通り、dmsとdegreeに対応-->
  </format>
  <poi>
    <point>			<!-- 初回表示位置(ホーム位置) -->
      <pos><lat>35,10,26.362</lat><lon>137,2,57.339</lon></pos>
    </point>
    <move>			<!-- ルート再生用の緯度経度列をここに記述します -->
      <locus>
        <pos><lat>35,10,27.058</lat><lon>137,3,0.816</lon></pos>
        <pos><lat>35,10,25.899</lat><lon>137,3,0.969</lon></pos>
        <pos><lat>35,10,25.899</lat><lon>137,3,0.739</lon></pos>
      </locus>
    </move>
  </poi>
</poix>


緯度経度文字列・測地系

緯度経度文字列で使用できる書式は以下のとおりです。

  • 度.分.秒形式(35.39.26.180, 139.43.56.868)
  • 度/分/秒形式(35/39/26.180, 139/43/56.868)
  • 度形式(35.657272,139.732463)

なお、緯度経度で使用する測地系は、日本測地系(Tokyo97)になります。