サイズや位置を取得する

 地図の表示サイズはgetContainerSize()で求める事ができます。返されたオブジェクトのwidthが横の表示幅、heightが縦の表示幅になります。(実際のサンプルを実行する

<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:400px"></div>
<script type="text/javascript">
myPoint = new YGeoPoint(29, -97);
map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 8);
function getSize()
{
cSize = map.getContainerSize();
document.getElementById("resultW").value = cSize.width;
document.getElementById("resultH").value = cSize.height;
}
</script>
<form>
<input type="button" value="表示サイズを調べる" onClick="getSize()"><br>
横幅:<input type="text" size="10" id="resultW"><br>
縦幅:<input type="text" size="10" id="resultH"><br>
</form>
</body>
</html>


 現在の地図の中心の緯度、経度はgetCenterLatLon()で求める事ができます。返されるオブジェクトはYGeoPointオブジェクト形式になります。このオブジェクトのLonが経度、Latが緯度になります。(実際のサンプルを実行する

<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);
function getLatLon()
{
pointObj = map.getCenterLatLon();
document.getElementById("lat").value = pointObj.Lat;
document.getElementById("lon").value = pointObj.Lon;
}
</script>
<form>
<input type="button" value="中心位置を調べる" onClick="getLatLon()"><br>
経度:<input type="text" size="10" id="lon"><br>
緯度:<input type="text" size="10" id="lat"><br>
</form>
</body>
</html>

 表示されている地図の範囲を求めるにはgetBoundsLatLon()を使います。緯度の範囲はLatMin, LatMax、経度の範囲はLonMin, LonMaxになります。(実際のサンプルを実行する

<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);
function getBLatLon()
{
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="button" value="範囲を調べる" onClick="getBLatLon()"><br>
経度:<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>

[第15章 イベントを処理するへ]
[目次へ]

(2006.2.28)