Yahoo 地図の復習
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()
でで新しい中心位置の緯度経度が取得できます
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()
でで新しい中心位置の緯度経度が取得できます
スポンサーサイト
