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 | ... | ... |