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

広告

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

panBy(x:number, y:number)

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

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

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

実際には次のように記述します。 

function initialize() {
  var latlng = new google.maps.LatLng(35.308401,136.131592);
  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);
}
サンプルコード

では実際に試してみます。 

var map;

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

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

function toLeftBottom() {
  map.panBy(-1000, 600);
}

<!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 JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code3_1.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="righttop" value="右上へ" onclick="toRightTop()" />
    <input type="button" id="leftbottom" value="左下へ" onclick="toLeftBottom()" />
    </p>
    </form>
  </body>
</html>

ブラウザで上記ページを開くと次のように表示されます。

p3-1

今回は地図下に設置したボタンの中で「右上へ」を押すと右上方向に地図の半分の大きさだけ移動します。この場合はスムーズに移動します。

p3-2

地図下に設置したボタンの中で「左下へ」を押すと左下方向に地図の大きさの倍の分だけ移動します。この場合は切り替わるように移動します。

p3-3

ピクセル単位で移動する距離を指定していますので、ズームレベルに関係無く画面上のサイズで一定の大きさを移動させたい場合に便利です。

( Written by Tatsuo Ikura )