0
J'ai du mal à déchiffrer l'API Google Street View et à apprendre le Javascript en cours de route. J'ai ce script que j'ai trouvé en ligne pour référencer des images panoramiques personnalisées. Cependant, mon prochain objectif est de créer un lien direct vers un panoramique personnalisé. J'ai donc le script de base qui fonctionne comme je le veux, mais dans la version finale, j'aurai une colonne à droite de la vue de la rue avec des liens pointant directement vers certains endroits pour que l'utilisateur final n'ait pas à naviguer une imageLien Google Street View (href) vers l'emplacement personnalisé
Merci pour toute aide!
<!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>