FC2ブログ

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 地図の リファレンス

Yahoo 地図を使ったものを作るときに参考になる
リファレンスのリンクです

JavaScriptマップ

一番使いそうなのが

コントロールの追加になる
ymap.addControl(control);

の関連

例えば

地図の縮尺を変更する横長スライダー形式のユーザーインターフェースを表示
する
var control = new Y.SliderZoomControlHorizontal();
ymap.addControl(control);

とか

地図検索を追加する

var control = new Y.SearchControl();
ymap.addControl(control);

などなど

テーマ : プログラミング
ジャンル : コンピュータ

Yahoo!地図 SDK for Android を調べてます

Yahoo!地図 SDK for Android について情報収集しています

まだ、実験するために必要な情報を得ていないので
まずは必要な情報、そして参考になるサイトをみています

書籍をみると、ほとんどが Google Maps API になっているため
ネットで探すことにしました

Android Map SDK

Yahoo!地図 SDK for Android を使ってみました
などなど、検索すればいろいろとでてきそうです

テーマ : プログラミング
ジャンル : コンピュータ

Yahoo Map API の情報収集開始

Google Maps API が来年から有料となるため、
Yahoo 地図に乗り換えるべく、情報収集しています

検索だけでは効率が悪いため、Google アラートに登録し
情報収集することにしました

現在、参考になりそうなサイトとして

Yahoo!地図WEB APIでマップ表示

Yahoo!地図APIに挑戦

Yahoo!地図 JavaScriptマップAPI入門

ゼロからはじめるYahoo! Maps API

MIT Media Lab新所長、伊藤穰一とPivotalのCTO,Ian McFarlandが語る会に行った

です

テーマ : インターネットサービス
ジャンル : コンピュータ

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック