Commit 5b41688684b37ff26df324690c46f55111328af9
1 parent
b2145b07
Exists in
master
and in
1 other branch
Move and rotate
Showing
2 changed files
with
36 additions
and
34 deletions
Show diff stats
index.html
| @@ -38,9 +38,9 @@ | @@ -38,9 +38,9 @@ | ||
| 38 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script> | 38 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script> |
| 39 | <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/vendor/markerAnimate.js"></script> | 39 | <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/vendor/markerAnimate.js"></script> |
| 40 | <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/SlidingMarker.min.js"></script> | 40 | <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/SlidingMarker.min.js"></script> |
| 41 | - <script> | 41 | + <!-- <script> |
| 42 | SlidingMarker.initializeGlobally(); | 42 | SlidingMarker.initializeGlobally(); |
| 43 | - </script> | 43 | + </script> --> |
| 44 | 44 | ||
| 45 | </body> | 45 | </body> |
| 46 | </html> | 46 | </html> |
src/js/app.js
| @@ -252,7 +252,7 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -252,7 +252,7 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
| 252 | 252 | ||
| 253 | function follow(overview_path, start, end) { | 253 | function follow(overview_path, start, end) { |
| 254 | 254 | ||
| 255 | - var marker = new google.maps.Marker({ | 255 | + var marker = new SlidingMarker({ |
| 256 | position: overview_path[0], | 256 | position: overview_path[0], |
| 257 | icon: { | 257 | icon: { |
| 258 | url: "../includes/images/car3x.png", | 258 | url: "../includes/images/car3x.png", |
| @@ -260,47 +260,49 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | @@ -260,47 +260,49 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval | ||
| 260 | anchor: new google.maps.Point(16, 16) | 260 | anchor: new google.maps.Point(16, 16) |
| 261 | }, | 261 | }, |
| 262 | map: map, | 262 | map: map, |
| 263 | - optimized: false | 263 | + optimized: false, |
| 264 | + duration: 0, | ||
| 265 | + easing: "linear" | ||
| 264 | }); | 266 | }); |
| 267 | + // var from; | ||
| 268 | + // var to; | ||
| 269 | + // var heading; | ||
| 270 | + // var arrOfRots = []; | ||
| 271 | + // var pre = [0]; | ||
| 272 | + // var turn; | ||
| 273 | + var j = 0; | ||
| 274 | + | ||
| 275 | + //Distances and Measurements | ||
| 265 | var from; | 276 | var from; |
| 266 | var to; | 277 | var to; |
| 267 | - var heading; | ||
| 268 | - var arrOfRots = []; | ||
| 269 | - var pre = [0]; | ||
| 270 | - var turn; | ||
| 271 | - var c = 0; | ||
| 272 | - var i = 1; | ||
| 273 | - var j = 1; | 278 | + var MPH = 50; //Or x miles per 60 minutes |
| 274 | 279 | ||
| 275 | function moveDriver() { | 280 | function moveDriver() { |
| 276 | - setTimeout(function() { | ||
| 277 | - | 281 | + |
| 282 | + from = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng()); | ||
| 283 | + to = new google.maps.LatLng(overview_path[j + 1].lat(), overview_path[j + 1].lng()); | ||
| 278 | 284 | ||
| 279 | - function rotateDriver() { | ||
| 280 | - setTimeout(function() { | ||
| 281 | - var from = new google.maps.LatLng(overview_path[j - 1].lat(), overview_path[j - 1].lng()); | ||
| 282 | - var to = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng()); | ||
| 283 | - var heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to)); | ||
| 284 | - if (Math.abs(heading) > 0) { | ||
| 285 | - $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' }); | ||
| 286 | - } | 285 | + var heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to)); |
| 286 | + //if (Math.abs(heading) > 0) { | ||
| 287 | + $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' }); | ||
| 288 | + //} | ||
| 287 | 289 | ||
| 288 | - j++; | ||
| 289 | - if (j < 180) { | ||
| 290 | - rotateDriver(); | ||
| 291 | - } | ||
| 292 | - }, 500) | ||
| 293 | - } | ||
| 294 | - rotateDriver(); | 290 | + //Getting Distance to milliseconds |
| 291 | + var a = google.maps.geometry.spherical.computeDistanceBetween( from, to );//Metres | ||
| 292 | + var b = a * 0.000621371; //Miles | ||
| 293 | + var c = MPH / b; //Difference | ||
| 294 | + var d = 60 / c; //Work out the minutes based on the difference | ||
| 295 | + var e = d * 60000; // Convert to milliseconds | ||
| 295 | 296 | ||
| 297 | + j++; | ||
| 296 | 298 | ||
| 297 | - j=1; | ||
| 298 | - marker.setPosition(overview_path[i]); | ||
| 299 | - i++; | ||
| 300 | - if (i < overview_path.length) { | ||
| 301 | - moveDriver(); | 299 | + marker.duration = e; |
| 300 | + marker.setPosition(overview_path[j]); | ||
| 301 | + if (j < overview_path.length) { | ||
| 302 | + setTimeout(function(){ | ||
| 303 | + moveDriver(); | ||
| 304 | + }, e) | ||
| 302 | } | 305 | } |
| 303 | - }, 1000) | ||
| 304 | } | 306 | } |
| 305 | moveDriver(); | 307 | moveDriver(); |
| 306 | 308 |