|
|
日時： 2010/01/26 13:29
名前： lightbox
|
実装
ggv_pano_view.php
拡張子:
<?
if ( $_GET['w'] == '' ) {
$_GET['w'] = 600;
}
if ( $_GET['h'] == '' ) {
$_GET['h'] = 400;
}
if ( $_GET['id'] == '' ) {
$_GET['id'] = 'デフォルトのドキュメントのURL';
}
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API を利用した Google ストリートビュー</title>
<script
charset="utf-8"
src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAADuryzsZi1CenwhafsPEvzBTlxX6exlqfox7R3DL2rE86SPuTyhTaQ7BUC2tKBidUAEn1fGLxVVQR1A"
type="text/javascript"
></script>
<script
type="text/javascript"
src="http://www.google.com/jsapi"
charset="utf-8"
></script>
<script type="text/javascript">
google.load("prototype", "1.6.0.3" );
google.load('visualization', '1', { packages: ['table'] });
</script>
<script type="text/javascript">
var myPano;
var myPOV;
var data;
function drawVisualization() {
var query = new google.visualization.Query(
"<?= $_GET['id'] ?>" );
query.setQuery("select *");
query.send( responseGet );
}
function responseGet(response) {
if ( response.isError() ) {
alert(getDetailedMessage());
return;
}
data = response.getDataTable();
var userAgent = window.navigator.userAgent.toLowerCase();
var nCols = data.getNumberOfRows();
var newNode,targetNode;
targetNode = document.getElementById("combo");
for( var i = 0; i < nCols; i++ ) {
newNode = document.createElement("OPTION");
if (userAgent.indexOf("msie") > -1) {
targetNode.add( newNode );
newNode.innerText = data.getValue(i, 4);
newNode.value = i;
}
else {
targetNode.appendChild( newNode );
newNode.appendChild( document.createTextNode(data.getValue(i, 4)));
newNode.value = i;
}
}
var a,b,c,d,e;
a = data.getValue(0, 0);
b = data.getValue(0, 1);
c = data.getValue(0, 2);
d = data.getValue(0, 3);
myPano = new GStreetviewPanorama(document.getElementById("pano"));
var fenwayPark = new GLatLng(a,b);
myPOV = {yaw:c,pitch:d,zoom:0};
myPano.setLocationAndPOV(fenwayPark, myPOV);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == 603) {
alert("Error: Flash doesn't appear to be supported by your browser");
return;
}
}
function changePano(no) {
myPano.hide();
var wPov = myPano.getPOV();
wPov.zoom = 0;
if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
myPano.panTo(wPov);
}
else {
myPano.setPOV(wPov);
}
var a,b,c,d,e;
var i = parseInt(no);
a = data.getValue(i, 0);
b = data.getValue(i, 1);
c = data.getValue(i, 2);
d = data.getValue(i, 3);
var newPlace =
new GLatLng(
a,
b
);
myPOV.yaw = c;
myPOV.pitch = d;
myPOV.zoom = 0;
myPano.setLocationAndPOV(newPlace, null);
if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
myPano.panTo(myPOV);
}
else {
myPano.setPOV(myPOV);
}
myPano.show();
}
function handleUnload_createPano() {
GUnload();
if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
try {
CollectGarbage();
}
catch(e) {
}
}
}
if (window.attachEvent){
window.attachEvent('onunload', handleUnload_createPano);
}
else {
window.addEventListener('unload', handleUnload_createPano, false);
}
google.setOnLoadCallback(drawVisualization);
</script>
<style type="text/css">
body {
margin:0;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div name="pano" id="pano" style='width:<?= $_GET['w'] ?>px;height:<?= $_GET['h'] ?>px;'></div>
<select id="combo" onChange='changePano(this.value)'>
</select>
</body>
</html>
|
Google ドキュメントを利用した 切り替え式パノラマ