动画多个标记

我在地图上有几个标记，绘制了折线。 我想沿着折线的路径移动每个标记，以模拟每个标记的同时移动。

我在做这个问题时遇到了问题，我只得到最后一个移动标记而其余部分没有移动。 作为使用这种编程技术的新手，我认为我的代码出了问题，特别是我试图为每个标记设置动画的方式。 我需要一些指导。

这是我迄今为止的工作： Jsbin DEMO

var startLoc = new Array(); startLoc[0] = 'rio claro, trinidad'; startLoc[1] = 'preysal, trinidad'; startLoc[2] = 'san fernando, trinidad'; startLoc[3] = 'couva, trinidad'; var endLoc = new Array(); endLoc[0] = 'princes town, trinidad'; endLoc[1] = 'tabaquite, trinidad'; endLoc[2] = 'mayaro, trinidad'; endLoc[3] = 'arima, trinidad'; var Colors = ["#FF0000", "#00FF00", "#0000FF"]; function initialize() { infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50) }); var myOptions = { zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); address = 'Trinidad and Tobago' geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { map.setCenter(results[0].geometry.location); }); } function createMarker(latlng, label, html) { // alert("createMarker("+latlng+","+label+","+html+","+color+")"); var contentString = ''+label+'
'+html; var marker = new google.maps.Marker({ position: latlng, map: map, title: label, zIndex: Math.round(latlng.lat()*-100000)<<5 }); marker.myname = label; google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); return marker; } function setRoutes(){ var directionsDisplay = new Array(); for (var i=0; i< startLoc.length; i++){ var rendererOptions = { map: map, suppressMarkers : true } directionsService = new google.maps.DirectionsService(); var travelMode = google.maps.DirectionsTravelMode.DRIVING; var request = { origin: startLoc[i], destination: endLoc[i], travelMode: travelMode }; directionsService.route(request,makeRouteCallback(directionsDisplay[i])); } function makeRouteCallback(disp){ return function(response, status){ if (status == google.maps.DirectionsStatus.OK){ var bounds = new google.maps.LatLngBounds(); var route = response.routes[0]; startLocation = new Object(); endLocation = new Object(); polyline = new google.maps.Polyline({ path: [], strokeColor: '#FFFF00', strokeWeight: 3 }); poly2 = new google.maps.Polyline({ path: [], strokeColor: '#FFFF00', strokeWeight: 3 }); // For each route, display summary information. var path = response.routes[0].overview_path; var legs = response.routes[0].legs; //Routes if (status == google.maps.DirectionsStatus.OK){ console.log(response); disp = new google.maps.DirectionsRenderer(rendererOptions); disp.setMap(map); disp.setDirections(response); //Markers for (i=0;i<legs.length;i++) { if (i == 0) { startLocation.latlng = legs[i].start_location; startLocation.address = legs[i].start_address; // marker = google.maps.Marker({map:map,position: startLocation.latlng}); marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green"); } endLocation.latlng = legs[i].end_location; endLocation.address = legs[i].end_address; var steps = legs[i].steps; for (j=0;j<steps.length;j++) { var nextSegment = steps[j].path; var nextSegment = steps[j].path; for (k=0;k 20) { poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]); // map.addOverlay(poly2) } if (polyline.GetIndexAtDistance(d) 1) { poly2.getPath().removeAt(poly2.getPath().getLength()-1) } poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.GetPointAtDistance(d)); } else { poly2.getPath().insertAt(poly2.getPath().getLength(),endLocation.latlng); } } //---------------------------------------------------------------------------- function animate(d) { if (d>eol) { marker.setPosition(endLocation.latlng); return; } var p = polyline.GetPointAtDistance(d); //map.panTo(p); marker.setPosition(p); updatePoly(d); timerHandle = setTimeout("animate("+(d+step)+")", tick); } //------------------------------------------------------------------------- function startAnimation() { eol=polyline.Distance(); map.setCenter(polyline.getPath().getAt(0)); poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#FFFF00", strokeWeight:3}); setTimeout("animate(50)",2000); // Allow time for the initial map display } //----------------------------------------------------------------------------    
 Start 
 
 

Answer 1

如果要为多个标记设置动画，则必须更改animate和startAnimation函数以处理多个标记（可能将所有变量都放入数组中）。

例

代码段：

  var map; var directionDisplay; var directionsService; var stepDisplay; var position; var marker = []; var polyline = []; var poly2 = []; var poly = null; var startLocation = []; var endLocation = []; var timerHandle = []; var speed = 0.000005, wait = 1; var infowindow = null; var myPano; var panoClient; var nextPanoId; var startLoc = new Array(); startLoc[0] = 'rio claro, trinidad'; startLoc[1] = 'preysal, trinidad'; startLoc[2] = 'san fernando, trinidad'; startLoc[3] = 'couva, trinidad'; var endLoc = new Array(); endLoc[0] = 'princes town, trinidad'; endLoc[1] = 'tabaquite, trinidad'; endLoc[2] = 'mayaro, trinidad'; endLoc[3] = 'arima, trinidad'; var Colors = ["#FF0000", "#00FF00", "#0000FF"]; function initialize() { infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50) }); var myOptions = { zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); address = 'Trinidad and Tobago' geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { map.fitBounds(results[0].geometry.viewport); }); // setRoutes(); } function createMarker(latlng, label, html) { // alert("createMarker("+latlng+","+label+","+html+","+color+")"); var contentString = ''+label+'
'+html; var marker = new google.maps.Marker({ position: latlng, map: map, title: label, zIndex: Math.round(latlng.lat()*-100000)<<5 }); marker.myname = label; google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); return marker; } function setRoutes(){ var directionsDisplay = new Array(); for (var i=0; i< startLoc.length; i++){ var rendererOptions = { map: map, suppressMarkers : true, preserveViewport: true } directionsService = new google.maps.DirectionsService(); var travelMode = google.maps.DirectionsTravelMode.DRIVING; var request = { origin: startLoc[i], destination: endLoc[i], travelMode: travelMode }; directionsService.route(request,makeRouteCallback(i,directionsDisplay[i])); } function makeRouteCallback(routeNum,disp){ if (polyline[routeNum] && (polyline[routeNum].getMap() != null)) { startAnimation(routeNum); return; } return function(response, status){ if (status == google.maps.DirectionsStatus.OK){ var bounds = new google.maps.LatLngBounds(); var route = response.routes[0]; startLocation[routeNum] = new Object(); endLocation[routeNum] = new Object(); polyline[routeNum] = new google.maps.Polyline({ path: [], strokeColor: '#FFFF00', strokeWeight: 3 }); poly2[routeNum] = new google.maps.Polyline({ path: [], strokeColor: '#FFFF00', strokeWeight: 3 }); // For each route, display summary information. var path = response.routes[0].overview_path; var legs = response.routes[0].legs; disp = new google.maps.DirectionsRenderer(rendererOptions); disp.setMap(map); disp.setDirections(response); //Markers for (i=0;i 20) { poly2[i]=new google.maps.Polyline([polyline[i].getPath().getAt(lastVertex-1)]); // map.addOverlay(poly2) } if (polyline[i].GetIndexAtDistance(d) < lastVertex+2) { if (poly2[i].getPath().getLength()>1) { poly2[i].getPath().removeAt(poly2[i].getPath().getLength()-1) } poly2[i].getPath().insertAt(poly2[i].getPath().getLength(),polyline[i].GetPointAtDistance(d)); } else { poly2[i].getPath().insertAt(poly2[i].getPath().getLength(),endLocation[i].latlng); } } //---------------------------------------------------------------------------- function animate(index,d) { if (d>eol[index]) { marker[index].setPosition(endLocation[index].latlng); return; } var p = polyline[index].GetPointAtDistance(d); //map.panTo(p); marker[index].setPosition(p); updatePoly(index,d); timerHandle[index] = setTimeout("animate("+index+","+(d+step)+")", tick); } //------------------------------------------------------------------------- function startAnimation(index) { if (timerHandle[index]) clearTimeout(timerHandle[index]); eol[index]=polyline[index].Distance(); map.setCenter(polyline[index].getPath().getAt(0)); poly2[index] = new google.maps.Polyline({path: [polyline[index].getPath().getAt(0)], strokeColor:"#FFFF00", strokeWeight:3}); timerHandle[index] = setTimeout("animate("+index+",50)",2000); // Allow time for the initial map display } //---------------------------------------------------------------------------- google.maps.event.addDomListener(window,'load',initialize); 

 html{height:100%;} body{height:100%;margin:0px;font-family: Helvetica,Arial;} 

   
 Start 
 
 

Answer 2

你正在使用很多变量，这些变量在for()循环中没有用var声明。 最值得注意的是for (i=...在makeRouteCallback(disp)当makeRouteCallback(disp)已经有变量i时。我认为这可能会导致这种行为。