http://www.moriwaki.net/gis/GStreetviewClient.html
GStreetviewClient に経緯度情報またはPanoID（ストリートビューの位置毎についたID）を設定することで、サーバから該当するストリートビューデータ（GStreetviewData）を取得する。（経緯度の場合は直近のストリートビュー）
<!DOCTYPE html PUBLIC "-//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>Streetview API example</title>
<script type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2.x&key=XXXX"></script>
<script type="text/javascript">
var panorama, client;
window.onload = load;
window.onunload = GUnload;
function $(id) {
return document.getElementById(id);
}
function load() {
client = new GStreetviewClient();
$("latlng").onclick = getByLatlng;
$("panoId").onclick = getByPanoId;
}
function getByLatlng() {
var latlng = new GLatLng($("lat").value, $("lng").value);
client.getNearestPanorama(latlng, onResponse);
}
function getByPanoId() {
client.getPanoramaById($("id").value, onResponse);
}
function onResponse(response) {
if (response.code != 200) {
$("data").innerHTML ="Error code:" + response.code;
if (panorama) panorama.remove();
} else {
$("data").innerHTML = "lat:" + response.location.latlng.lat()
+ "<br />lng:" + response.location.latlng.lng()
+ "<br />yaw:" + response.location.pov.yaw
+ "<br />pitch:" + response.location.pov.pitch
+ "<br />zoom:" + response.location.pov.zoom
+ "<br />description:" + response.location.description
+ "<br />panoId:" + response.location.panoId;
panorama = new GStreetviewPanorama($("pano"), {
latlng: response.location.latlng,
pov: response.location.pov
})
}
}
</script>
</head>
<body>
経緯度でストリートビューデータを取得<br />
lat:<input type="text" id="lat" size="30" value="34.75162696450041" />
lng:<input type="text" id="lng" size="30" value="135.39308309555057" />
<button id="latlng">Latlng</button>
<br /><br />
panoIdでストリートビューデータを取得<br />
panoId:<input type="text" id="id" size="30" value="_XVcqI9Cd6ZOgu0RsK7ZvQ" />
<button id="panoId">panoId</button>
<br /><br />
ストリートビューデータ：<br />
<div id="data"></div>
<div id='pano' style='width:400px;height:200px;'></div>
</body>
</html>
Trackback URL:
