我想在屏幕上显示另一个街景窗格。我将“redraw()”函数绑定到按钮 onclick 事件。onclick 事件调用 redraw() 函数绘制另一个街景失败。
当在 initialize() 函数中调用 redraw() 函数时,它运行良好。
Q1。为什么这个 redraw() 函数的行为不同?
Q2。我怎样才能让它按我的意愿工作?
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Simple Custom StreetView</title>
<meta charset="utf-8">
<link href="/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var tileSize, worldSize;
var panorama = null;
var panorama1 = null;
var panoOptions = null;
var panoOptions1 = null;
function initialize() {
// Set up Street View and initially set it visible. Register the
// custom panorama provider function. Set the StreetView to display
// the custom panorama 'reception' which we check for below.
panoOptions = {
pano: 'reception',
visible: true,
panoProvider: getCustomPanorama
};
tileSize = 1024;
worldSize = 1024;
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano_canvas'), panoOptions);
//redraw();
}
function redraw() {
// Set up Street View and initially set it visible. Register the
// custom panorama provider function. Set the StreetView to display
// the custom panorama 'reception' which we check for below.
tileSize = 1024;
worldSize = 1024;
panoOptions1 = {
pano: 'reception1',
visible: true,
panoProvider: getCustomPanorama1
};
panorama1 = new google.maps.StreetViewPanorama(
document.getElementById('pano_canvas1'), panoOptions1);
}
// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'panoReception1024-0.jpg';
}
// Return a pano image given the panoID.
function getCustomPanoramaTileUrl1(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'panoReception1024-0.jpg';
}
// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
if (pano == 'reception') {
return {
location: {
pano: 'reception',
description: 'Google Sydney - Reception'
},
links: [],
// The text for the copyright control.
copyright: 'Imagery (c) 2010 Google',
visible: true,
// The definition of the tiles for this panorama.
tiles: {
tileSize: new google.maps.Size(tileSize, 512),
worldSize: new google.maps.Size(worldSize, 512),
// The heading in degrees at the origin of the panorama
// tile set.
centerHeading: 105,
getTileUrl: getCustomPanoramaTileUrl
}
};
}
}
// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama1(pano, zoom, tileX, tileY) {
if (pano == 'reception1') {
return {
location: {
pano: 'reception1',
description: 'Google Sydney - Reception'
},
links: [],
visible: true,
// The text for the copyright control.
copyright: 'Imagery (c) 2010 Google',
// The definition of the tiles for this panorama.
tiles: {
tileSize: new google.maps.Size(tileSize, 512),
worldSize: new google.maps.Size(worldSize, 512),
// The heading in degrees at the origin of the panorama
// tile set.
centerHeading: 105,
getTileUrl: getCustomPanoramaTileUrl1
}
};
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<b>Tile Size: </b>
<select id="tileSize" >
<option value="256">256</option>
<option value="512">512</option>
<option value="768">768</option>
<option value="1024" selected>1024</option>
<option value="2048">2048</option>
</select>
<b>World Size: </b>
<select id="worldSize" >
<option value="256">256</option>
<option value="512">512</option>
<option value="768">768</option>
<option value="1024" selected>1024</option>
<option value="2048">2048</option>
</select>
<input type="button" value="Redraw" id="redraw" onclick="redraw()" />
</div>
<div id="pano_canvas" style="width: 500px; height: 380px"></div>
<div id="pano_canvas1" style="width: 500px; height: 380px"></div>
</body>
</html>