0
Ich habe es schwer, die Google Street View-API zu entschlüsseln und auf dem Weg etwas Javascript zu lernen. Ich habe dieses Skript online gefunden, um benutzerdefinierte Panoramabilder zu referenzieren. Mein nächstes Ziel ist es jedoch, direkt mit einem benutzerdefinierten Panorama zu verlinken. Ich habe also das grundlegende Skript wie gewünscht, aber in der endgültigen Version werde ich eine Spalte rechts von der Straßenansicht haben mit Links, die direkt auf bestimmte Orte zeigen, so dass der Endnutzer nicht um die ganze Karte herum navigieren muss ein Bild.Google Street View-Link (href) zu Custom location
Danke für jede Hilfe!
<!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>