地図上で発生したイベントを取得することができます。イベントはYEvent.capture()を使います。以下のイベントを指定することができます。
| changeZoom | ズームレベルが変化したとき |
|---|
| endAutoPan | 自動パン(移動)が終了した |
|---|
| endPan | パン(移動)が終了した |
|---|
| onPan | パン(移動)が開始された |
|---|
| startAutoPan | 自動パン(移動)が開始された |
|---|
| startPan | パン(移動)が開始された |
|---|
| MouseClick | クリックされた |
|---|
| MouseDown | マウスボタンが押された |
|---|
| MouseDoubleClick | ダブルクリックされた |
|---|
| MouseOut | マウスポインタが離れた |
|---|
| MouseOver | マウスポインタが重なった |
|---|
| MouseUp | マウスボタンが離された |
|---|
以下のサンプルはクリックされた時に表示範囲を表示するものです。（実際のサンプルを
実行する）
<html>
<head>
<title>sample</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=
openspaceYS"></script>
</head>
<body>
<div id="mapContainer" style="width:600px;height:600px"></div>
<script type="text/javascript">
myPoint = new YGeoPoint(29, -97);
map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 11);
YEvent.Capture(map, EventsList.MouseClick, dispBounds);
function dispBounds()
{
pointObj = map.getBoundsLatLon();
document.getElementById("latMin").value = pointObj.LatMin;
document.getElementById("latMax").value = pointObj.LatMax;
document.getElementById("lonMin").value = pointObj.LonMin;
document.getElementById("lonMax").value = pointObj.LonMax;
}
</script>
<form>
経度：<input type="text" size="18" id="lonMin">-<input type="text" size="18" id="lonMax"><br>
緯度：<input type="text" size="18" id="latMin">-<input type="text" size="18" id="latMax"><br>
</form>
</body>
</html>
以下のサンプルはズームレベルが変化した時に、ズームレベルを表示するものです。（実際のサンプルを
実行する）
<html>
<head>
<title>sample</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=
openspaceYS"></script>
</head>
<body>
<div id="mapContainer" style="width:600px;height:600px"></div>
<script type="text/javascript">
myPoint = new YGeoPoint(29, -97);
map = new YMap(document.getElementById("mapContainer"));
map.addZoomLong();
map.drawZoomAndCenter(myPoint, 11);
YEvent.Capture(map, EventsList.changeZoom, dispZoomLevel);
function dispZoomLevel()
{
n = map.getZoomLevel();
document.getElementById("zLevel").value = n;
}
</script>
<form>
倍率：<input type="text" size="18" id="zLevel">
</form>
</body>
</html>
[
第15章 マーカーを表示するへ]
[
目次へ]
(2006.2.28)