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 | 38 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script> |
| 39 | 39 | <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/vendor/markerAnimate.js"></script> |
| 40 | 40 | <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/SlidingMarker.min.js"></script> |
| 41 | - <script> | |
| 41 | + <!-- <script> | |
| 42 | 42 | SlidingMarker.initializeGlobally(); |
| 43 | - </script> | |
| 43 | + </script> --> | |
| 44 | 44 | |
| 45 | 45 | </body> |
| 46 | 46 | </html> | ... | ... |
src/js/app.js
| ... | ... | @@ -252,7 +252,7 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval |
| 252 | 252 | |
| 253 | 253 | function follow(overview_path, start, end) { |
| 254 | 254 | |
| 255 | - var marker = new google.maps.Marker({ | |
| 255 | + var marker = new SlidingMarker({ | |
| 256 | 256 | position: overview_path[0], |
| 257 | 257 | icon: { |
| 258 | 258 | url: "../includes/images/car3x.png", |
| ... | ... | @@ -260,47 +260,49 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval |
| 260 | 260 | anchor: new google.maps.Point(16, 16) |
| 261 | 261 | }, |
| 262 | 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 | 276 | var from; |
| 266 | 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 | 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 | 307 | moveDriver(); |
| 306 | 308 | ... | ... |