ストリートビューのデータがある座標を取得

広告

ストリートビューはデータが用意されている位置と用意されていない位置が存在します。そこで指定した座標に最も近くてストリートビューのデータが用意されている座標を取得したい場合があります。

このような時はGStreetviewClientクラスを使用します。コンストラクタ関数は次のように定義されています。 

GStreetviewClient()

新しい GStreetviewClient を作成します。

GStreetviewClientクラスのオブジェクトを作成したら、GStreetviewClientクラスで定義されているgetNearestPanoramaLatLngメソッドを使ってストリートビューのデータがある座標を検索します。 

getNearestPanoramaLatLng(latlng:GLatLng, callback:Function(GLatLng))

指定された場所に最も近いパノラマの GLatLng を見つけ、指定されたコールバッ
クに渡します。隣接するパノラマがない場合やサーバー エラーが発生した場合に
は、指定されたコールバックは代わりに null を受け取ります。

1番目の引数に座標を表すGLatLngクラスのオブジェクトを指定すると、ストリートビューのデータがある座標の中で引数に指定した座標に最も近い座標を検索します。検索が終わったら2番目の引数で指定したコールバック関数が呼び出されます。

コールバック関数には引数として検索した結果の座標が渡されてきます。 

var client = new GStreetviewClient();
client.getNearestPanoramaLatLng(slatlng, getLatLng);

function getLatLng(latlng){
  /* .. */
}

サンプルプログラム

では試してみます。

code7_1.js 

var map;
var panorama;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.659683,139.742956), 16);

    var street = new GStreetviewOverlay();
    map.addOverlay(street);

    var slatlng = new GLatLng(35.659683,139.742956);
    var option = { latlng:slatlng };

    var scontainer = document.getElementById("street");
    panorama = new GStreetviewPanorama(scontainer, option);

    GEvent.addListener(map, "click", moveCenter);
  }
}

function moveCenter(overlay, latlng){
  var client = new GStreetviewClient();
  client.getNearestPanoramaLatLng(latlng, getLatLng);
}

function getLatLng(newlatlng){
  map.panTo(newlatlng);
  panorama.setLocationAndPOV(newlatlng);
}

map7_1.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>サンプル：ストリートビューのデータがある座標を取得</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code7_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 300px"></div>
    <div id="street" style="width: 400px; height: 200px; margin-top:10px;"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p7-1

地図上の地点をクリックすると地図とストリートビューがその地点へ移動します。この時、クリックした地点にストリートビューのデータがなかった場合には、最も近くでストリートビューのデータがある地点へ移動します。

p7-2

p7-3

( Written by Tatsuo Ikura )