ズームインとズームアウト
setZoomメソッドではズームレベルを数値で指定して縮尺を設定しますが、今回は現在設定されているズームレベルを1増加させる、または1減少させる方法を確認します。
ズームレベルを1つ増加させるにはMapクラスで用意されているzoomInメソッドを使います。
zoomIn(latlng?:LatLng, animation?:Boolean, center?:Boolean)
ズームレベルを一つ上げます。latlngが指定されている場合、ズーム後にlatlngが画面内に 含まれるようにズームを変更します。centerが trueの場合、latlngの位置が中心点となるよ うにズームを変更します。 Parameters: latlng ズームの基点となる緯度経度 animation ズーム時にアニメーション処理 center ズームとともに中心点をlatlngの位置へ移動
引数無しでメソッドを実行するとズームレベルが1つ増加します。
1番目の引数に座標を指定した場合、ズームインが行われた後に1番目の引数に指定した座標が表示されるように表示される地図の位置が調整されます。結果的に現在の地図の中心座標と1番目の引数の座標の両方が表示できない場合は1番目の引数の座標の方が優先して表示されます。
2番目の引数にはズームレベルを変更する時にアニメーション処理を行うかどうかを指定します。trueならばアニメーションして変更し、falseならば切り替わるように変更されます。
3番目の引数にtrueを指定すると、ズームインすると同時に1番目の引数に指定した座標が地図の中心に設定されます。
例えば次のように記述します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.662484, 139.734222), 5);
ymap.zoomIn();
上記の場合はズームレベルが1つ増加して 6 となります。
次にズームレベルを1つ現象させるにはMapクラスで用意されているzoomOutメソッドを使います。
zoomOut(latlng?:LatLng, animation?:Boolean, center?:Boolean)
ズームレベルを一つ下げます。latlngが指定されている場合、ズーム後にlatlngが画面内 に含まれるようにズームを変更します。centerが trueの場合、latlngの位置が中心点とな るようにズームを変更します。 Parameters: latlng ズームの基点となる緯度経度 animation ズーム時にアニメーション処理 center ズームとともに中心点をlatlngの位置へ移動
引数無しでメソッドを実行するとズームレベルが1つ減少します。3つのオプション引数の使い方はzoomInメソッドと同じです。
例えば次のように記述します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.662484, 139.734222), 5);
ymap.zoomOut();
上記の場合はズームレベルが1つ減少して 4 となります。
サンプルプログラム
それでは簡単なサンプルで試してみます。
var ymap;
window.onload = function() {
ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.680743,139.767423), 10);
}
function zoomin(){
ymap.zoomIn();
}
function zoomout(){
ymap.zoomOut();
}
function zoominAndMove(){
ymap.zoomIn(new Y.LatLng(35.170265,136.881838), true, true);
}
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Yahoo! JavaScriptマップAPI</title>
<script type="text/javascript" charset="utf-8"
src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=(id)">
</script>
<script src="./js/code4_1.js" type="text/javascript"></script>
</head>
<body>
<p>
JavaScriptマップAPIを使ったサンプルです。
</p>
<div id="map" style="width:400px; height:300px"></div>
<form>
<p style="padding:0;margin:0;">
<input type="button" value="＋" onclick="zoomin()" />
<input type="button" value="－" onclick="zoomout()" />
<input type="button" value="＋ (中心移動)" onclick="zoominAndMove()" />
</p>
</form>
<!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
<a href="http://developer.yahoo.co.jp/about">
<img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" border="0" style="margin:10px 15px 15px 15px"></a>
<!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
</body>
</html>
上記を実際にブラウザ見てみると次のように表示されます。
画面左下の「＋」ボタンを押すとズームレベルが1つ増加します。
画面左下の「－」ボタンを押すとズームレベルが1つ減少します。
画面左下の「＋ (中心移動)」ボタンを押すとズームレベルが1つ増加すると同時に別途指定された座標が地図の中心に設定されます。
以上です。
( Written by Tatsuo Ikura+ )