ズームの処理もいくつか用意されています。指定した地点を指定したズームレベル（拡大縮小率）で表示させるにはdrawZoomAndCenter()を使います。最初のパラメータが位置、次のパラメータがズーム値になります。ズームの値は1〜16まで指定することができます。1がもっとも拡大された状態、16が最も縮小された状態になります。（実際のサンプルを
実行する）
<html>
<head>
<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">
var myPoint = new YGeoPoint(29, -97);
var map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 8);
</script>
</body>
</html>
現在の地点を中心にして拡大したり縮小したりする場合にはsetZoomLevel()を使います。パラメータは1つで1〜16までの値を指定します。（実際のサンプルを
実行する）
<html>
<head>
<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">
zoomLevel = 6;
myPoint = new YGeoPoint(30, -97);
map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, zoomLevel);
function mapZoom(n)
{
zoomLevel += n;
map.setZoomLevel(zoomLevel);
}
</script>
<form>
<input type="button" value="拡大" onClick="mapZoom(1)">
<input type="button" value="縮小" onClick="mapZoom(-1)">
</form>
</body>
</html>
現在表示されている地図のズームレベルを取得することもできます。値を取得するにはgetZoomLevel()を使います。戻り値がズームレベルになります。1〜16までの値が返されます。（実際のサンプルを
実行する）
<html>
<head>
<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">
var myPoint = new YGeoPoint(30, -97);
var map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 9);
map.addZoomLong();
window.onload = check;
function check()
{
n = map.getZoomLevel();
document.getElementById("zLevel").value = n;
setTimeout("check()",1000);
}
</script>
<form>
ズームレベル：<input type="text" size="3" id="zLevel">
</form>
</body>
</html>
ズームレベルの値の範囲は1〜16と書きましたが、将来この範囲が変更になる可能性もあります。そのため、現在有効なズームレベルを調べるメソッドが用意されています。それがgetZoomValidLevels()です。有効なズームレベルを配列として返します。実際のサンプルを
実行する）
<html>
<head>
<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(30, -97);
map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 6);
function check()
{
n = map.getZoomValidLevels();
alert("type : "+typeof(n)+"/ "+n);
}
</script>
<form>
<input type="button" value="チェック" onClick="check()">
</form>
</body>
</html>
[
第15章 ドラッグの処理へ]
[
目次へ]
(2006.2.28)