我很难尝试破译谷歌街景API，并在此过程中学习一些Javascript。我有这个脚本，我在网上找到的引用自定义全景图像。但是，我的下一个目标是直接链接到自定义全景图。所以我的基本脚本可以像想要的那样工作，但在最终版本中，我将在街景右侧有一个列，其中包含直接指向某些位置的链接，因此最终用户不必在地图上导航一张图像。
感谢您的任何帮助！
<!DOCTYPE html>
<html>
<head>
<title>Custom Street View panorama tiles</title>
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=jibberjabber0&callback=initialize">
</script>
<script>
var urlquery = window.location.search.substring(1);
//alert(query);
var panorama;
// The panorama that will be used as the entry point to the custom
// panorama set.
var entryPanoId = null;
function initialize() {
// The latlng of the entry point to the Google office on the road.
var unionOffice = new google.maps.LatLng(38.4086774, -81.4638667);
// Set up the map and enable the Street View control.
var mapOptions = {
center: unionOffice,
zoom: 0
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
panorama = map.getStreetView();
// Set up Street View and initially set it visible. Register the
// custom panorama provider function.
var panoOptions = {
position: unionOffice,
visible: true,
panoProvider: getCustomPanorama
};
panorama.setOptions(panoOptions);
// Create a StreetViewService object.
var streetviewService = new google.maps.StreetViewService();
// Compute the nearest panorama to the Google Sydney office
// using the service and store that pano ID.
var radius = 50;
streetviewService.getPanoramaByLocation(unionOffice, radius,
function(result, status) {
console.log("1", arguments);
if (status == google.maps.StreetViewStatus.OK) {
// We'll monitor the links_changed event to check if the current
// pano is either a custom pano or our entry pano.
google.maps.event.addListener(panorama, 'links_changed', function() {
console.log("2", arguments);
createCustomLinks(result.location.pano);
});
google.maps.event.addListener(panorama, 'position_changed', function() {
console.log('panorama.getPosition()', panorama.getPosition());
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
});
}
});
}
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Return a pano image given the panoID.
console.log('pana URL', arguments);
if (pano === 'bayside'){
return 'file:///J:/location/to/image/photo34.jpg';
} else if(pano === 'desk') {
return 'file:///J:/location/to/image/photo31.jpg';
} else if(pano === 'meetingroom') {
return 'file:///J:/location/to/image/photo32.jpg';
}
}
//getCustomPanorama('bayside');
//alert(urlquery);
function getCustomPanorama(pano) {
switch (pano) {
case 'desk':
return {
location: {
pano: 'desk',
description: 'Developers Desk',
latLng: new google.maps.LatLng(38.4086774, -81.4638667)
},
links: [],
// 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(1047, 523),
worldSize: new google.maps.Size(1047, 523),
// tileSize: new google.maps.Size(1024, 512),
// worldSize: new google.maps.Size(2048, 1024),
// The heading at the origin of the panorama tile set.
centerHeading: 105,
getTileUrl: getCustomPanoramaTileUrl
}
};
break;
case 'bayside':
return {
location: {
pano: 'bayside',
description: '7 Seas Baysids',
latLng: new google.maps.LatLng(43.649179, -79.391393)
},
links: [],
// 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(1047, 523),
worldSize: new google.maps.Size(1047, 523),
// tileSize: new google.maps.Size(1024, 512),
// worldSize: new google.maps.Size(2048, 1024),
// The heading at the origin of the panorama tile set.
centerHeading: 105,
getTileUrl: getCustomPanoramaTileUrl
}
};
break;
case 'meetingroom':
return {
location: {
pano: 'meetingroom',
description: 'Meeting Room',
latLng: new google.maps.LatLng(43.649141, -79.391396)
},
links: [],
// 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(3000, 1500),
worldSize: new google.maps.Size(3000, 1500),
// tileSize: new google.maps.Size(1024, 512),
// worldSize: new google.maps.Size(2048, 1024),
// The heading at the origin of the panorama tile set.
centerHeading: 105,
getTileUrl: getCustomPanoramaTileUrl
}
};
break;
default:
return null;
}
}
function createCustomLinks(entryPanoId) {
var links = panorama.getLinks();
var panoId = panorama.getPano();
switch (panoId) {
case entryPanoId:
// Adding a link in the view from the entrance of the building to
// reception.
links.push({
heading: 15,
description: 'UNION',
pano: 'bayside'
});
break;
case 'desk':
// Adding a link in the view from the entrance of the office
// with an arrow pointing at 100 degrees, with a text of 'Exit'
// and loading the street entrance of the building pano on click.
links.push({
heading: 195,
description: 'UNION',
pano: 'bayside'
});
links.push({
heading: 260,
description: 'Meeting Room',
pano: 'meetingroom'
});
break;
case 'bayside':
// Adding a link in the view from the entrance of the office
// with an arrow pointing at 100 degrees, with a text of 'Exit'
// and loading the street entrance of the building pano on click.
links.push({
heading: 180,
description: 'Exit',
pano: entryPanoId
});
links.push({
heading: 360,
description: 'Developers Desk',
pano: 'desk'
});
break;
case 'meetingroom':
// Adding a link in the view from the entrance of the office
// with an arrow pointing at 100 degrees, with a text of 'Exit'
// and loading the street entrance of the building pano on click.
links.push({
heading: 30,
description: 'Developers Desk',
pano: 'desk'
});
break;
default:
return;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
只需减小 #map canvasdiv 的宽度，添加另一个div，给出新的div 宽度，并将其浮动到右侧，您应该将列放在右侧以填充所需的任何数据。
但是，您的问题还不够清楚，因此这可能不是您要找的。
举个例子：
<style>
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map-canvas {
width: 80%;
height: 100%;
}
#col-right {
width: 20%;
height: 100%;
}
</style>
以及您的代码中进一步...
<body>
<div id="map-canvas"></div>
<div id="col-right">Populate with data</div>
</body>