0
我正在使用'Gmaps动画路线（在这里找到https://github.com/henriquea/gmaps-animated-route），现在我的一切工作正常 - 但我希望当用户再次点击'动画路线'时重置动画。我不知道从哪里开始或在文件中编辑什么，以便地图重置。任何帮助是极大的赞赏。如何重新启动这个动画地图路线？
请让我知道是否有更多的信息或代码，你需要我。
route.js
define([
'gmaps',
'../underscore',
'./points',
'./filters',
'./styles',
'./animation'],
function(gmaps, _, points, filters, styles, animateRoute){
function Route(options) {
this.options = this.extend(this._options, options);
this.init();
}
Route.prototype = {
// default options
_options: {
initializeFilters: true,
animate: true
},
map: {},
mapTileListener: null,
coordinates: [],
line: {},
enabledFilters: {},
init: function(){
this.enabledFilters = (this.options.initializeFilters ? filters : {});
this.parseJSON(points);
},
parseJSON: function(data){
this.coordinates = data.map(function(item){
return {
lat: item.latitude,
lng: item.longitude,
timestamp: item.timestamp,
googLatLng: new gmaps.LatLng(item.latitude, item.longitude)
}
});
this.drawMap();
},
drawMap: function() {
var self = this,
forEach = Array.prototype.forEach;
self.map = new gmaps.Map(document.querySelector(".map"), {
center: new gmaps.LatLng(41.712167, -90.689098),
zoom: 14,
mapTypeId: gmaps.MapTypeId.ROADMAP,
styles: styles,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl : false,
scrollwheel: false,
zoomControlOptions : {
position: gmaps.ControlPosition.LEFT_BOTTOM,
style: gmaps.ZoomControlStyle.LARGE
}
});
// Wait map to be fully loaded before set the markers
self.mapTileListener = gmaps.event.addListener(self.map, 'tilesloaded', function(){
self.setMarkers();
gmaps.event.removeListener(self.tileListener);
});
},
setMarkers: function() {
var self = this,
startMarker, endMarker, pin;
pin = new gmaps.MarkerImage('images/pin.png', null, null, null, new gmaps.Size(38,45));
startMarker = new gmaps.Marker({
position: self.coordinates[0].googLatLng,
icon: pin,
map: self.map,
//animation: google.maps.Animation.DROP
});
endMarker = new google.maps.Marker({
position: self.coordinates[self.coordinates.length-1].googLatLng,
icon: pin,
map: self.map,
//animation: google.maps.Animation.DROP
});
//self.updateRoutes();
},
updateRoutes: function() {
var pathCoordinates = _.pluck(this.normalizeCoordinates(), "googLatLng");
if(this.options.animate) {
this.enabledFilters = filters;
pathCoordinates = _.pluck(this.normalizeCoordinates(), "googLatLng");
animateRoute(pathCoordinates, this.map);
return;
}
this.line = new gmaps.Polyline({
path: pathCoordinates,
geodesic: false,
strokeColor: '#fff000',
strokeOpacity: 1,
strokeWeight: 2
});
this.line.setMap(this.map);
},
// Remove potentially erroneous points
normalizeCoordinates: function() {
var self = this;
var filtersList = _.keys(self.enabledFilters);
return _.reduce(filtersList, function(memo, filter) {
return self.enabledFilters[filter](memo);
}, self.coordinates);
},
playAnimation: function() {
if (this.line.setMap) {
this.line.setMap(null);
}
this.options.animate = true;
this.updateRoutes();
},
extend: function(a, b) {
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
}
}
return Route;
});
animation.js
define(['gmaps'],function(gmaps){
var animationIndex = 0;
function animateRoute(coords, map) {
var self = this,
step = 0,
numSteps = 100,
animationSpeed = 0.10,
offset = animationIndex,
nextOffset = animationIndex + 1,
departure, destination, nextStop, line, interval;
if (nextOffset >= coords.length) {
clearInterval(interval);
return false;
}
departure = coords[offset];
destination = coords[nextOffset];
line = new gmaps.Polyline({
path: [departure, departure],
geodesic: false,
strokeColor: '#fff000',
strokeOpacity: 0.5,
strokeWeight: 4,
map: map
});
interval = setInterval(function() {
step++;
if (step > numSteps) {
animationIndex++;
animateRoute(coords, map);
clearInterval(interval);
} else {
nextStop = gmaps.geometry.spherical.interpolate(departure,destination,step/numSteps);
line.setPath([departure, nextStop]);
}
}, animationSpeed);
}
return animateRoute;
});
points.js
// array of points (latitude, longitude and timestamp)
define([], function() {
return [
{
"latitude": "41.71312",
"longitude": " -90.68956",
"timestamp": "100"
},
{
"latitude": "41.70579",
"longitude": "-90.68943",
"timestamp": "200"
},
{
"latitude": "41.70566",
"longitude": "-90.69617",
"timestamp": "300"
},
{
"latitude": "41.70265",
"longitude": "-90.69411",
"timestamp": "400"
},
{
"latitude": "41.69951",
"longitude": "-90.70046",
"timestamp": "500"
},
{
"latitude": "41.70252",
"longitude": "-90.70638",
"timestamp": "600"
},
{
"latitude": "41.70598",
"longitude": "-90.70775",
"timestamp": "700"
},
{
"latitude": "41.70566",
"longitude": "-90.69248",
"timestamp": "800"
},
{
"latitude": "41.7136",
"longitude": "-90.69213",
"timestamp": "900"
},
{
"latitude": "41.71376",
"longitude": "-90.69574",
"timestamp": "1000"
},
{
"latitude": "41.71947",
"longitude": "-90.696",
"timestamp": "1100"
},
{
"latitude": "41.7169",
"longitude": "-90.69016",
"timestamp": "1200"
}
]
})
filters.js
define(['gmaps', '../GDouglasPeuker'], function(gmaps, GDouglasPeuker) {
return {
/*
* Douglas Peucker line simplification routine
* http://www.bdcc.co.uk/Gmaps/GDouglasPeuker.js
*/
GDPeuker: function(data) {
var gdp = GDouglasPeuker(_.pluck(data, "googLatLng"), 23),
result = _.filter(data, function(c) {
return _.contains(gdp, c.googLatLng);
});
return result;
},
/*
* Calculate a maxium possible distance between the coordinates
* http://thinkmetric.org.uk/speed.html
*/
maxDistanceTravelled: function(data) {
var maxMetersPerSec = 13, // 50km/h
i, curr, last, result = [];
for(i=0;i<data.length;i++) {
curr = data[i];
if (last) {
// seconds between current and last coord
var diff = curr.timestamp - last.timestamp;
var maxDistance = diff * maxMetersPerSec;
var traveledDistance = gmaps.geometry.spherical.computeDistanceBetween(last.googLatLng, curr.googLatLng);
if (traveledDistance > maxDistance) {
continue;
} else {
result.push(curr);
}
} else {
result.push(curr);
}
last = curr;
}
return result;
}
}
});
感谢您的帮助！这工作完美，我所要做的只是将你的代码复制并粘贴到我的和Voila中！ – upbeatdesignsnet
太棒了！希望你在不同的浏览器上进行测试。我只使用Chrome。 –