зеркало из https://github.com/mozilla/popcorn-js.git
Streetview tweening, with demo added to the html file
This commit is contained in:
David Seifried
Родитель
4cc25abe15
Коммит
917c4b9a9e
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<script src="../../popcorn.js"></script>
|
||||
<script src="popcorn.googlemap.js"></script>
|
||||
<script>
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var p = Popcorn('#video')
|
||||
.volume(0)
|
||||
|
|
@ -19,16 +19,71 @@
|
|||
lng: -79.403323,
|
||||
zoom: "10"
|
||||
} )
|
||||
.googlemap({
|
||||
start: 0, // seconds
|
||||
end: 40, // seconds
|
||||
type: "STREETVIEW",
|
||||
target: "map3",
|
||||
location: "6th Line, Oakville, Ontario",
|
||||
//lat: 35.7795324,
|
||||
//lng: -78.63915450000002,
|
||||
zoom: "1",
|
||||
heading: "180",
|
||||
pitch: "1",
|
||||
interval: 1000,
|
||||
endLoc: "York university"
|
||||
})
|
||||
.googlemap({
|
||||
start: 0, // seconds
|
||||
end: 40, // seconds
|
||||
type: "STREETVIEW",
|
||||
target: "map5",
|
||||
location: "Buffallo",
|
||||
//lat: 35.7795324,
|
||||
//lng: -78.63915450000002,
|
||||
zoom: "1",
|
||||
heading: "180",
|
||||
pitch: "1",
|
||||
interval: 1000,
|
||||
endLoc: "Ottawa"
|
||||
})
|
||||
.googlemap({
|
||||
start: 0, // seconds
|
||||
end: 20, // seconds
|
||||
type: "STREETVIEW",
|
||||
target: "map1",
|
||||
lat: 43.665429,
|
||||
lng: -79.403323,
|
||||
target: "map4",
|
||||
lat: 35.7795324,
|
||||
lng: -78.63915450000002,
|
||||
zoom: "1",
|
||||
heading: "0",
|
||||
pitch: "1"
|
||||
heading: "180",
|
||||
pitch: "1",
|
||||
tween:[
|
||||
{
|
||||
position: {lat: 35.778056, lng: -78.63903579999999},
|
||||
pov: {heading: 183.5, zoom: 1, pitch:1},
|
||||
interval:2000
|
||||
},
|
||||
{
|
||||
position: {lat: 35.7770258, lng: -78.63929150000001},
|
||||
pov: {heading: 180, zoom: 1, pitch:1},
|
||||
interval:2000
|
||||
},
|
||||
{
|
||||
position: {lat: 35.775581, lng: -78.639395},
|
||||
pov: {heading: 180, zoom: 1, pitch:1},
|
||||
interval:2000
|
||||
},
|
||||
{
|
||||
position: {lat: 35.775581, lng: -78.639395},
|
||||
pov: {heading: 105, zoom: 1, pitch:1},
|
||||
interval:2000
|
||||
},
|
||||
{
|
||||
position: {lat: 35.775581, lng: -78.639395},
|
||||
pov: {heading: 0, zoom: 1, pitch:1},
|
||||
interval:2000
|
||||
}
|
||||
]
|
||||
} )
|
||||
.googlemap({
|
||||
start: 0, // seconds
|
||||
|
|
@ -37,16 +92,32 @@
|
|||
target: "map2",
|
||||
location:"boston",
|
||||
zoom: 15
|
||||
} )
|
||||
.googlemap({
|
||||
start: 0, // seconds
|
||||
end: 20, // seconds
|
||||
type: "STREETVIEW",
|
||||
target: "map1",
|
||||
lat: 43.665429,
|
||||
lng: -79.403323,
|
||||
zoom: "1",
|
||||
heading: "0",
|
||||
pitch: "1"
|
||||
} );
|
||||
}, false);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">Popcorn google Map Plug-in Demo</h1>
|
||||
<p> A Google Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 20 seconds.</p>
|
||||
<p> A Google StreetView Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 20 seconds.</p>
|
||||
<p> A Google Map Streetview image of Toronto, Ontario will appear at 0 seconds and disaapear at 20 seconds</p>
|
||||
<p> A Google Map displaying Boston will appear at 0 seconds and disappear at 30 seconds.</p>
|
||||
<p> A Google Map Streetview tweening from Oakville, Ontario to York University will appear at 0 seconds and disaapear at 40 seconds</p>
|
||||
<p> A Google Map Streetview tweening from 217 Fayetteville Street to East Davie Street will appear at 0 seconds and disaapear at 20 seconds - Using hardcoded lat+lng values</p>
|
||||
<p> A Google Map Streetview tweening from Buffallo to Ottawa will appear at 0 seconds and disaapear at 40 seconds</p>
|
||||
<div>
|
||||
|
||||
<video id='video'
|
||||
controls
|
||||
width= '250px'
|
||||
|
|
@ -64,10 +135,14 @@
|
|||
|
||||
</video>
|
||||
</div>
|
||||
<div style="width:1000px">
|
||||
|
||||
<div style="width:2000px">
|
||||
<div id="map" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
|
||||
<div id="map1" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
|
||||
<div id="map2" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
|
||||
<div id="map3" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
|
||||
<div id="map4" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
|
||||
<div id="map5" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,22 @@ var googleCallback;
|
|||
* -Heading [optional] STREETVIEW orientation of camera in degrees relative to true north (0 north, 90 true east, ect)
|
||||
* -Pitch [optional] STREETVIEW vertical orientation of the camera (between 1 and 3 is recommended)
|
||||
* -Lat and Lng: the coordinates of the map must be present if location is not specified.
|
||||
* -Location: the adress you want the map to display, bust be present if lat and log are not specified.
|
||||
* -Location: the adress you want the map to display, must be present if lat and lng are not specified.
|
||||
* Note: using location requires extra loading time, also not specifying both lat/lng and location will
|
||||
* cause and error.
|
||||
*
|
||||
* Tweening works using the following specifications:
|
||||
* -Location is the start point when using an auto generated route
|
||||
* -endLoc is the end location when using an auto generated route
|
||||
* Note that both location and endLoc must be present when using an auto generated route, or the map will not tween
|
||||
* -Interval is the speed in which the tween will be executed, a reasonable time is 1000 ( time in milliseconds )
|
||||
* Heading, Zoom, and Pitch streetview values are also used in tweening with the autogenerated route
|
||||
*
|
||||
* -Tween is an array of objects, each containing data for one frame of a tween
|
||||
* -position is an object with has two paramaters, lat and lng, both which are mandatory for a tween to work
|
||||
* -pov is an object which houses heading, pitch, and zoom paramters, which are all optional, if undefined, these values default to 0
|
||||
* -interval is the speed in which the tween will be executed, a reasonable time is 1000 ( time in milliseconds )
|
||||
*
|
||||
* @param {Object} options
|
||||
*
|
||||
* Example:
|
||||
|
|
@ -128,6 +141,8 @@ var googleCallback;
|
|||
* options variable
|
||||
*/
|
||||
start: function (event, options) {
|
||||
var that = this;
|
||||
|
||||
// ensure the map has been initialized in the setup function above
|
||||
var isMapSetup = function () {
|
||||
if (map) {
|
||||
|
|
@ -159,7 +174,8 @@ var googleCallback;
|
|||
// Switch this map into streeview mode
|
||||
map.setStreetView(
|
||||
// Pass a new StreetViewPanorama instance into our map
|
||||
sView = new google.maps.StreetViewPanorama(newdiv, {
|
||||
|
||||
sView = new google.maps.StreetViewPanorama( newdiv, {
|
||||
position: location,
|
||||
pov: {
|
||||
heading: options.heading = options.heading || 0,
|
||||
|
|
@ -170,72 +186,120 @@ var googleCallback;
|
|||
|
||||
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
// Function to handle tweening using a set timeout
|
||||
var tween = function ( rM, t ) {
|
||||
|
||||
var tween = function (rM, t) {
|
||||
setTimeout( function () {
|
||||
|
||||
setTimeout(function () {
|
||||
// Checks whether this is a generated route or not
|
||||
if( options.tween ){
|
||||
|
||||
if(options.tween){
|
||||
for ( var i = 0; i < rM.length; i++ ) {
|
||||
|
||||
var p = new google.maps.LatLng(rM.position.lat, rM.position.lng);
|
||||
sView.setPosition(p);
|
||||
// Checks if this position along the tween should be displayed or not
|
||||
if( that.media.currentTime >= ( rM[ i ].interval*( i+1 ) )/1000 &&
|
||||
( that.media.currentTime <= (rM[ i ].interval*( i+2 ) )/1000 ||
|
||||
that.media.currentTime >= rM[ i ].interval*( rM.length )/1000 ) ){
|
||||
|
||||
sView.setPov({
|
||||
heading: rM.pov.heading,
|
||||
zoom: 1,
|
||||
pitch: 1
|
||||
});
|
||||
var p = new google.maps.LatLng( rM[ i ].position.lat, rM[ i ].position.lng );
|
||||
sView3.setPosition( p );
|
||||
|
||||
sView3.setPov({
|
||||
heading: rM[ i ].pov.heading || 0,
|
||||
zoom: rM[ i ].pov.zoom || 0,
|
||||
pitch: rM[ i ].pov.pitch || 0
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
// Calls the tween function again at the interval set by the user
|
||||
tween( rM, rM[ 0 ].interval );
|
||||
}
|
||||
else{
|
||||
sView.setPosition(rM);
|
||||
|
||||
for ( var i = 0; i < rM.length; i++ ) {
|
||||
|
||||
if( that.media.currentTime >= (options.interval*(i+1))/1000 && (that.media.currentTime <= (options.interval*(i+2))/1000 || that.media.currentTime >= options.interval*(rM.length)/1000)){
|
||||
|
||||
sView2.setPosition( checkpoints[i] );
|
||||
|
||||
sView2.setPov({
|
||||
heading: options.heading || 0,
|
||||
zoom: options.zoom,
|
||||
pitch: options.pitch || 0
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
tween( checkpoints, options.interval );
|
||||
}
|
||||
}, t);
|
||||
}, t );
|
||||
|
||||
}
|
||||
|
||||
var tmr = 0;
|
||||
|
||||
if ( !options.tween && ( options.location && options.endLoc) ){
|
||||
|
||||
// Determines if we should use hardcoded values ( using options.tween ),
|
||||
// or if we should use a start and end location and let google generate
|
||||
// the route for us
|
||||
if ( !options.tween && ( options.location && options.endLoc ) ){
|
||||
|
||||
// Creating another variable to hold the streetview map for tweening,
|
||||
// Doing this because if there was more then one streetview map, the tweening would sometimes appear in other maps
|
||||
var sView2 = sView;
|
||||
|
||||
// Create an array to store all the lat/lang values along our route
|
||||
var checkpoints = [];
|
||||
|
||||
// Creates a new direction service, later used to create a route
|
||||
var directionsService = new google.maps.DirectionsService();
|
||||
|
||||
var directionsDisplay = new google.maps.DirectionsRenderer(sView);
|
||||
// Creates a new direction renderer using the current map
|
||||
// This enables us to access all of the route data that is returned to us
|
||||
var directionsDisplay = new google.maps.DirectionsRenderer( sView2 );
|
||||
|
||||
var request = {
|
||||
origin: options.location,
|
||||
destination:options.endLoc,
|
||||
travelMode: google.maps.TravelMode.DRIVING
|
||||
origin: options.location,
|
||||
destination: options.endLoc,
|
||||
travelMode: google.maps.TravelMode.DRIVING
|
||||
};
|
||||
|
||||
directionsService.route(request, function(response, status) {
|
||||
if (status == google.maps.DirectionsStatus.OK) {
|
||||
directionsDisplay.setDirections(response);
|
||||
showSteps(response);
|
||||
// Create the route using the direction service and renderer
|
||||
directionsService.route( request, function( response, status ) {
|
||||
|
||||
if ( status == google.maps.DirectionsStatus.OK ) {
|
||||
directionsDisplay.setDirections( response );
|
||||
showSteps( response, that );
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function showSteps(directionResult) {
|
||||
for (var j = 0; j < directionResult.routes[0].overview_path.length; j++) {
|
||||
checkpoints.push(new google.maps.LatLng(directionResult.routes[0].overview_path[j].lat(), directionResult.routes[0].overview_path[j].lng()));
|
||||
function showSteps( directionResult, that ) {
|
||||
|
||||
// Push new google map lat and lng values into an array from our list of lat and lng values
|
||||
for ( var j = 0; j < directionResult.routes[ 0 ].overview_path.length; j++ ) {
|
||||
checkpoints.push( new google.maps.LatLng( directionResult.routes[ 0 ].overview_path[ j ].lat(), directionResult.routes[ 0 ].overview_path[ j ].lng() ) );
|
||||
}
|
||||
for ( var i = 0; i < checkpoints.length; i++ ) {
|
||||
tmr = tmr + options.interval;
|
||||
tween( checkpoints[i], tmr );
|
||||
}
|
||||
|
||||
// Check to make sure the interval exists, if not, set to a default of 1000
|
||||
options.interval = options.interval || 1000;
|
||||
tween( checkpoints, 10);
|
||||
|
||||
}
|
||||
}
|
||||
else {
|
||||
for ( i = 0; i < options.tween.length; i++ ) {
|
||||
tmr = tmr + options.tween[i].interval;
|
||||
tween( options.tween[i], tmr );
|
||||
else if( options.tween ){
|
||||
|
||||
// Same as the above to stop streetview maps from overflowing into one another
|
||||
var sView3 = sView;
|
||||
|
||||
for ( var i = 0; i < options.tween.length; i++ ) {
|
||||
|
||||
// Make sure interval exists, if not, set to 1000
|
||||
options.tween[ i ].interval = options.tween[ i ].interval || 1000;
|
||||
tween( options.tween, 10 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче