• 小
  • 中
  • 大

指定したピクセル分を移動

現在地図に表示されている位置から、指定した値分だけ移動する方法を確認します。値はピクセル単位で指定します。Mapクラスで用意されている「panBy」methodを使います。

panBy(x:number,y:number)  戻り値:None
ピクセル単位で指定した距離だけ、地図の中心を変更します。
距離が地図の幅と高さの両方よりも小さい場合、
遷移はスムーズにアニメーション表示されます。
地図の座標系は西から東(x 値の場合)、北から南(y 値の場合)
に増えることに注意してください。

1番目の引数でX軸方向の値、2番目の引数でY軸方向の値を指定します。X軸には左から右(西から東)が正の値、Y軸については上から下(北から南)が正の値となります。 各々逆の移動は負の値となります。

移動する場合、横方向(X軸)の移動が地図の幅よりも小さく、縦方向(Y軸)の移動が地図の高さよりも小さい場合には、スムーズにアニメーション表示で移動します。移動が地図の幅や高さよりも大きい場合には地図全体が切り替わり移動します。

実際には次のように記述します。
function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
map.panBy(100, -50);
}

サンプルコード

サンプル.js


function initialize() {
var latlng = new google.maps.LatLng(35.680865,139.767036);
var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById
("map_canvas"), opts);
}

function toRightDirection() {
map.panBy(250, -250);
}

function toLeftDirection() {
map.panBy(-800, 800);
}

サンプル.html
<!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>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps APIを使ったサンプルです。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
<form><p>
<input type="button" id="rightDirection" value="右上方向"
onclick="toRightDirection()" />
<input type="button" id="leftDirection" value="左下方向"
onclick="toLeftDirection()" />
</p></form>
</body>
</html>


表示例 指定したピクセル分を移動する


Google Maps サンプル > 指定したピクセル分 地図を移動させる