Yahoo! JavaScriptマップAPIの使い方

Yahoo! JavaScriptマップAPIの使い方

Google Maps APIじゃなくてあえてYahoo! JavaScriptマップAPIを勉強してみました。

理由としてはGoogleはゼンリンじゃなくなって、Yahooはゼンリンだからが理由です。私はゼンリン地図で育っております。ちなみに、ズームレベル20~11の詳細な地図については、株式会社ゼンリンから提供された情報をもとに作成されいてるようです。ズームレベルを11から10に変えるとコピーライトが変わります!

Yahoo! JavaScriptマップAPIの使い方

Yahoo! JavaScriptマップAPIですが、yahoo idがあればだれでも無料で使えます。まずはappidを発行してもらいます。(割愛)

一番簡単な地図の表示方法です。

サンプル

Y.Mapをnewする

まずここから始まります。Y.Mapは地図です。drawMapメソッドは地図を表示するメソッドです。このメソッドを実行して初めてコンテナに地図が表示されます。

Y.Mapの引数は地図を表示するコンテナのid属性を指定します。ここではidはgoogleにしてます。

drawMapの引数は3つ必要

1つ目…new Y.Lating(緯度,経度)

2つ目…ズームレベル

3つ目…レイヤーセットID

1つ目で表示したい緯度経度を与えます。2つ目で地図のズームレベルを与えます。3つ目でレイヤーセットIDという標準地図だったり航空写真だったりを指定します。

ズームレベルはY.LayerSetId.NORMALの場合は1~20までですが、レイヤーセットIDによって指定できる範囲は異なります。

ズームレベルをスライダーで表示する

できます。地図を表示した後に以下1行追加するだけです。

サンプル

レイヤーを表示する

できます。地図を表示した後に以下1行追加するだけです。

地図、航空写真、地下街が表示されるようになります。変更することによりズームレベルの選択範囲も動的に変わります。

サンプル

レイヤー表示したけど航空写真だけ非表示にしたい

できます。一旦addControlでレイヤー表示した後にremoveLayerSetメソッドを実行し、引数にレイヤーセットIDを指定して削除します。

指定できるレイヤーセットIDは以下の通りです。

レイヤーセットID
Y.LayerSetId.NORMAL 標準地図
Y.LayerSetId.PHOTO 航空写真
Y.LayerSetId.B1 地下街
Y.LayerSetId.OSM OpenStreetMap

サンプル

コントロール位置を指定する

ズームレベルはデフォルトはTOP_LEFTのようです。試しにTOP_RIGHTにしてみました。

ControlPositionクラスを使用します。ここではズームレベルを右上、レイヤーを右下に表示しました。

サンプル

ズームレベルが地図から見切れてしまっていますね、、。どうしよう。。

コントロール位置をオフセット位置調整する

Sizeクラスを使えばオフセット位置を調整できるようです。ズームレベルに対してだけ位置調整しました。

ControlPositionクラスの第二引数にSizeクラスを指定します。

これでズームレベルの位置を微妙に調整することが出来ました。

サンプル

雨雲レーダーをオーバーレイして表示する

地図に雨雲レーダーを重ねて表示することができます。

Mapクラスの第二引数にはオプションが指定できます。このオプションでweatherOverlay: trueとすることで雨雲レーダーが表示されるようになります。

雨雲レーダーを表示する際にズームレベルが15以下でないと表示されないようです。ここでは14としています。

サンプル

住所から検索して地図を移動する

住所を入力するコントロールがあります。Y.SearchControlというコントロールを使用すれば検索することが可能です。次の1行を追加します。

これで住所入力欄が左上に表示されます。

サンプル

他にもイベントとか地図上にオブジェクトを表示したりいろいろできますが、詳細は公式サイトを見てください。

Yahoo! JavaScriptマップAPI

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA