地図をLatLngBoundsで指定した領域を含む様に移動します。
このメソッドは下記のような特徴があります。
・地図中に指定領域が含まれていれば地図は動きません（指定領域をセンター移動はしない）。
・指定領域が現在のズーム値で収まらない場合、北西の座標を含むようにシフトされる。
・パン、ズームなどのコントロールの内側に配置されるように移動する。
・移動後の表示範囲に移動前の表示範囲が少しでも含まれていれば遷移がアニメーションになる。
ちょっと分かりにくいかも知れないのですが、
取りあえずサンプルです。
「ディズニーリゾートへ移動」ボタンを押すと移動します。
ズーム値を色々変化させながら移動させると面白いと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title> google maps api v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
var map = document.getElementById("map_canvas");
var latlng = new google.maps.LatLng(35.689980, 139.700225);
var mapOptions = {
zoom: 14,
center: latlng
};
var gmap = new google.maps.Map(map, mapOptions);
var moveButton = document.getElementById("move_button");
google.maps.event.addDomListener(moveButton, "click", function () {
var sw = new google.maps.LatLng(35.638744, 139.870205);
var ne = new google.maps.LatLng(35.620710, 139.893551);
var bounds = new google.maps.LatLngBounds(sw, ne);
gmap.panToBounds(bounds);
});
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 400px; height: 400px"> </div>
<span id="move_button" style="cursor:pointer;"> [ ディズニーリゾートへ移動 ]</span>
</body>
</html>
0 件のコメント:
コメントを投稿