Yahoo!デベロッパーネットワーク – YOLP(地図)
Yahoo地図のjavascript API を使って地図を表示できます
java script マップの場合
ページ遷移せずに ドラッグ＆ドロップで
地図の場所を動かしたり尺度変更などが可能
ちなみに、スマートフォンでこれを使うと
タッチ操作による自動スクロール
一部端末によっては
ピンチ操作で地図尺度の変更ができます
ただし
ピンチズーム機能
Y.Polyline、Y.Polygon、Y.Circleオブジェクトからのクリックイベント通知
がAndroid だとできません
地図を表示するには
Yahoo!アプリケーションIDが必要
これに関しては
Yahoo Maps API
に以前かきましたので、それを見ながら復習しました
https://e.developer.yahoo.co.jp/dashboard/
で
取得したYAHOO!アプリケーションIDを見れます
そして、IDを含んだリクエストURLに対して外部java script を読み込み
どんな地図を表示したいか設定
地図APIにアクセスするには
<script type=”text/javascript” charset=”utf-8″ src=”http://
js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=
YahooアプリケーションID
“></script>
となります
地図を表示するには
<!DOCTYPE html>
<html>
<body>
<div id=”map” style=”width:400px; height:300px”></div>
<script type=”text/javascript” charset=”utf-8″ src=”http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=アプリケーションID“></script>
<script type=”text/javascript”>
window.onload = function(){
var ymap = new Y.Map(“map”);
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
}
</script>
</body>
</html>
というようになります
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
は初期かした地図の表示で
35.66572, 139.73100 が中心の緯度経度
17 がズームレベル
Y.LayerSetId.NORMAL が
レイヤーセットIDになります
今回の Y.LayerSetId.NORMAL
は標準写真で、
これを
Y.LayerSetId.PHOTO にすれば航空写真に
Y.LayerSetId.B1 なら地下街
Y.LayerSetId.OSM なら 最近話題の OpenStreetMap
というようになります
ymap.addControl（）
でコントロールの追加ができます
Y.SliderZoomControlHorizontal
は
地図の縮尺を変更するための横長スライダーをつけます
Y.SearchControl()
で
地図検索のユーザーインターフェースを表示
つまり、検索枠を追加します
Y.CenterMarkControl
で地図の中心位置を表示します
ymap.bind
はイベントに対する動作を設定します
このイベントとは
地図の移動やクリックなど
のことをいいます
簡単サンプルとして、地図をマウスクリックしたときの動作なら
ymap.bind(‘click’, function(latlng){
alert(latlng.toString());
});
となります
click を moveend にすると
マウスによるドラッグやY.Map.panTo()メソッドなどによって地図の中心位置が変化した
ときの動作になります
この時点で中心位置の値は更新されていますので
Y.Map.getCenter()
でで新しい中心位置の緯度経度が取得できます