谷歌地圖清除所有標記和多義線

我有一個功能，可以在地圖上設置路線，此功能可以從起點到終點創建多段線。一旦已經畫出了ploylines，我就沿着這些路徑製作了標記。谷歌地圖清除所有標記和多義線

當一個標記已沿着多段線進行動畫併到達了目的地時，我想要從地圖中清除所有疊加層。

這是我到目前爲止的LINK。

這是如何實現的？

CODE

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Directions Complex</title> 


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

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type ="text/javascript" src="http://www.geocodezip.com/scripts/v3_epoly.js"></script> 
<script type="text/javascript"> 

    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 = '<b>'+label+'</b><br>'+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<legs.length;i++) { 
       if (i == 0) { 
       startLocation[routeNum].latlng = legs[i].start_location; 
       startLocation[routeNum].address = legs[i].start_address; 
       // marker = google.maps.Marker({map:map,position: startLocation.latlng}); 
       marker[routeNum] = createMarker(legs[i].start_location,"start",legs[i].start_address,"green"); 
       } 
       endLocation[routeNum].latlng = legs[i].end_location; 
       endLocation[routeNum].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<nextSegment.length;k++) { 
        polyline[routeNum].getPath().push(nextSegment[k]); 
        //bounds.extend(nextSegment[k]); 
       } 

       } 
      } 

     }  

     polyline[routeNum].setMap(map); 
     //map.fitBounds(bounds); 
     startAnimation(routeNum); 

    } // else alert("Directions request failed: "+status); 

    } 

} 

    var lastVertex = 1; 
    var stepnum=0; 
    var step = 50; // 5; // metres 
    var tick = 100; // milliseconds 
    var eol= []; 
//----------------------------------------------------------------------     
function updatePoly(i,d) { 
// Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow 
    if (poly2[i].getPath().getLength() > 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 
} 

//----------------------------------------------------------------------------  



</script> 
</head> 
<body onload="initialize()"> 

<div id="tools"> 

    <button onclick="setRoutes();">Start</button> 

</div> 

<div id="map_canvas" style="width:100%;height:100%;"></div> 

</body> 
</html>

來源

2013-10-15 devdar

的錯誤是很清楚'makeRouteCallback不defined'。你確定它在使用它的範圍嗎？很難告訴你在這篇文章中你破壞了你的代碼的方式。你有一個展示問題的jsfiddle嗎？ – geocodezip

好的我看到問題makeRouteCallback是SetRoutes（）中的回調函數。我將修改我的代碼，但是我有興趣在標記到達折線的末端時擴展折線。你能就此提一下建議嗎？謝謝 – devdar

@geocodezip我更新了這個問題，並且包含了一個類似代碼的jsbin demo。我還包含了我想要在測試代碼中實現的描述。 – devdar

你應該能夠完成，這樣做如下：

首先，在setRoutes()，調用地圖渲染抑制折線（您已經繪製自己的）：

var rendererOptions = { 
      map: map, 
      suppressMarkers : true, 
      suppressPolylines : true, 
      preserveViewport: true 
     }

然後在animate()中設置所有標記和折線以隱藏書房在路由上：

if (d>eol[index]) { 
     marker[index].setVisible(false); 
     polyline[index].setVisible(false); 
     poly2[index].setVisible(false); 
     marker[index].setPosition(endLocation[index].latlng); 
     return; 
     }

查找修改後的示例在這裏：JSBIN

來源

2013-10-20 08:02:05 vinaut

很好的答案謝謝百萬 – devdar

你能不能告訴我我將如何處理它，如果我不得不等待所有標記完整的動畫。如果我有'如果（完成== startLoc.length）{}'曾經真實代表完成所有標記的移動。我正在嘗試這一點。我創建了一個循環並迭代設置標記和polyline.setVisible（false），並在循環外部放置了返回語句。然而只有標記被清除，多段線纔會停留。 – devdar

我看到我的錯誤，這也是一個錯字再次感謝 – devdar

谷歌地圖清除所有標記和多義線

回答

相關問題