#1 Switched from panorama to image
Keith Irwin
parent
4c2d18c47c
commit
1c3b19962f
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<!-- Styles -->
|
||||
<style>
|
||||
body, main {
|
||||
body, main, main img {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
|
@ -44,10 +44,11 @@
|
|||
<noscript>You need javascript to use this. </noscript>
|
||||
|
||||
<!-- Main container -->
|
||||
<main></main>
|
||||
<main><img/></main>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8&callback=init"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
80
script.js
80
script.js
|
|
@ -1,27 +1,18 @@
|
|||
'use strict';
|
||||
/* global navigator google */
|
||||
/* global $ navigator google */
|
||||
|
||||
var pano, newLoc;
|
||||
|
||||
// Create panorama
|
||||
function init(){
|
||||
pano = new google.maps.StreetViewPanorama(
|
||||
document.getElementsByTagName('main')[0], {
|
||||
panControl: false,
|
||||
zoomControl: false,
|
||||
addressControl: false,
|
||||
linksControl: false,
|
||||
motionTracking: false,
|
||||
motionTrackingControl: false
|
||||
}
|
||||
);
|
||||
}
|
||||
var newLoc;
|
||||
|
||||
// Get street view imagery
|
||||
function getStreetViewData(loc,rad,cb) {
|
||||
|
||||
// Ensure that the location hasn't changed (or this is the initial setting)
|
||||
if ( newLoc == null || loc.tim===newLoc.tim ) {
|
||||
|
||||
// Create service if it doesn't exist yet
|
||||
if (!sv) { var sv=new google.maps.StreetViewService(); }
|
||||
|
||||
// Retrieve data
|
||||
sv.getPanorama({
|
||||
location: {
|
||||
lat: loc.lat,
|
||||
|
|
@ -29,20 +20,24 @@ function getStreetViewData(loc,rad,cb) {
|
|||
},
|
||||
radius: rad
|
||||
}, function(data,status){ switch (status){
|
||||
|
||||
// Success
|
||||
case google.maps.StreetViewStatus.OK:
|
||||
cb(data);
|
||||
break;
|
||||
|
||||
// No results in that radius
|
||||
case google.maps.StreetViewStatus.ZERO_RESULTS:
|
||||
// Try again with a bigger radius
|
||||
getStreetViewData(loc,rad*2,cb);
|
||||
break;
|
||||
|
||||
// Error
|
||||
default:
|
||||
console.error(new Error(
|
||||
'❌️ Street view not available: '+status
|
||||
).message);
|
||||
|
||||
} });
|
||||
}
|
||||
}
|
||||
|
|
@ -50,38 +45,35 @@ function getStreetViewData(loc,rad,cb) {
|
|||
// Update street view image
|
||||
function updateStreetView(loc){
|
||||
|
||||
// Panorama hasn't loaded
|
||||
if ( typeof pano == 'undefined' ){
|
||||
// Wait one second and try again
|
||||
setTimeout(updateStreetView(loc),1000);
|
||||
// Calculate bearing between user and position of streetview image
|
||||
// https://stackoverflow.com/a/26609687/3006854
|
||||
function getBearing(userLoc, imageLoc) {
|
||||
return 90-(
|
||||
Math.atan2( userLoc.lat-imageLoc.latLng.lat(), userLoc.lon-imageLoc.latLng.lng() )
|
||||
* (180/Math.PI) ) % 360;
|
||||
}
|
||||
|
||||
// Panorma has loaded
|
||||
else {
|
||||
// Get streetview data
|
||||
getStreetViewData(loc, 2, function(data){
|
||||
console.log('https://maps.googleapis.com/maps/api/streetview?'+
|
||||
'size='+ $('main img').width() +'x'+ $('main img').height() +
|
||||
'&location='+ data.location.latLng.lat() +','+ data.location.latLng.lng() +
|
||||
'&fov=90' + // Inclination
|
||||
// Show direction if moving, point to user if stationary
|
||||
'&heading='+ ( (loc.spd>2)? loc.dir: getBearing(loc,data.location) ).toString() +
|
||||
'&key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8');
|
||||
|
||||
// Get streetview data
|
||||
getStreetViewData(loc, 2, function(data){
|
||||
|
||||
// Calculate bearing
|
||||
var brng;
|
||||
|
||||
if (loc.spd>1){
|
||||
brng = loc.dir;
|
||||
}
|
||||
else { //https://stackoverflow.com/a/26609687/3006854
|
||||
brng = Math.atan2( loc.lat-data.location.latLng.lat(), loc.lon-data.location.latLng.lng() );
|
||||
brng = 90-(brng*(180/Math.PI))%360;
|
||||
}
|
||||
|
||||
// Set panorama
|
||||
pano.setPano(data.location.pano);
|
||||
pano.setPov({
|
||||
pitch: 0,
|
||||
heading: brng
|
||||
});
|
||||
});
|
||||
// Set image to streetview
|
||||
$('main img').attr('src','https://maps.googleapis.com/maps/api/streetview?'+
|
||||
'size='+ $('main img').width() +'x'+ $('main img').height() +
|
||||
'&location='+ data.location.latLng.lat() +','+ data.location.latLng.lng() +
|
||||
'&fov=90' + // Inclination
|
||||
// Show direction if moving, point to user if stationary
|
||||
'&heading='+ ( (loc.spd>2)? loc.dir: getBearing(loc,data.location) ).toString() +
|
||||
'&key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8'
|
||||
);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue