[戻る]
Yahoo! map JS版V1 で地図を描く-4
|
◆地図を操作する
先に述べたように、1.地図の表示方法と、2.表示の制御を踏まえて、色々な地図を作成出来ます。
参考
ここでは、JavaScriptで地図を操作する仕方を書きます。
具体的には、以下のようなものがあります。
|
| |
|
メソッド
|
説 明 |
例 |
|
panTo()
|
地図の中心位置を変更
|
ymap.panTo(new Y.LatLng(35.66, 139.73), true)
|
|
setZoom()
|
縮尺と中心位置を同時変更
|
ymap.Map.setZoom(20, true, new Y.LatLng(35.66, 139.73), true)
|
|
zoomIn()
|
縮尺を１つ上げる
|
ymap.zoomIn(new Y.LatLng(35.66, 139.73), true, true)
|
|
zoomOut()
|
縮尺を１つ下げる
|
ymap.zoomOut(new Y.LatLng(35.66, 139.73), true, true)
|
|
setLayerSetID()
|
地図の種類を変更
|
ymap.setLayerSet(Y.LayerSetId.PHOTO)
|
|
updateSize()
|
地図のサイズの更新
|
ymap.updateSize()
|
|
getCenter()
|
地図の中心位置を取得
|
ymap.getCenter()
|
|
getZoom()
|
ズームレベルの取得
|
ymap.getZoom()
|
|
fromContainerPixelToLatLng()
|
px座標から緯度経度に変換
|
ymap.fromContainerPixelToLatLng(new Y.Point(x, y))
|
|
fromLatLngToContainerPixel()
|
緯度経度からpx座標へ変換
|
ymap.fromLatLngToContainerPixel(new Y.LatLng(x, y))
|
|
◆イベントを利用する
イベントに対する処理を記述して、インタラクティブなサービスを構築できます。
イベント発生時の処理を行うイベントハンドラは、Y.MapやY.Markerなどのbind() メソッドを利用して登録します。
設定したイベントハンドラはunbind() メソッドで削除できます。
bind()メソッドは引数に
・イベント名（文字列）
・イベントハンドラ（関数オブジェクト）
を指定します。例えば、以下のように記述します。 実働例
利用可能な主なイベントは以下の通りです。
Y.Map
|
| |
|
イベント名
|
渡される引数 |
説 明 |
|
click
|
クリック位置の緯度経度（Y.LatLng）
|
クリックされた位置の緯度経度値が渡されます。
|
|
dblclick
|
クリック位置の緯度経度（Y.LatLng）
|
ダブルクリックされた位置の緯度経度値が渡されます。
|
|
layersetchanged
|
新しい（Y.LayerSet）、変更前の（Y.LayerSet）
|
地図のレイヤーセットが変更されたときに発生します。
|
|
movestart
|
|
地図の中心位置が変化する直前に発生します。
|
|
moveend
|
|
地図の中心位置が変化した直後に発生します。
|
|
zoomstart
|
|
地図の縮尺値が変更される直前に発生します。
|
|
zoomend
|
|
地図の縮尺値が変更された直後に発生します。
|
|
load
|
|
最初の地図描画が行われたときに発生します。
|
Y.Label Y.Marker Y.Polyline Y.Polygon Y.Circle共通
|
| |
|
イベント名
|
渡される引数 |
説 明 |
|
click
|
|
図形がクリックされたときに発生します。
|
Y.Markerのみ
|
| |
|
イベント名
|
渡される引数 |
説 明 |
|
mouseover
|
|
図形にマウスカーソルが重なったときに発生します。
|
|
mouseout
|
|
図形からマウスカーソルが離れたときに発生します。
|
例: 中心・クリック点の位置を表示
|
Y-map top/
作る-1/
作る-2/
作る-3/
作る-4/
作る-5/
作る-6/
|