谷歌地圖polyLine不清除

Question

我有一個示例谷歌地圖here我可以繪製一條折線並拖動標記重繪折線。當我拖動標記時，我使用Path.setMap(null)重繪折線作爲，

google.maps.event.addListener(marker, 'dragend', function(event) { 

        var newLatLng = event.latLng; 

        var index = Latlngs.map(function(element) { 
         return element[0]; 
        }).indexOf(marker.id); 
        if (index !== -1) { 
         Latlngs[index] = [marker.id, newLatLng]; 
        } 

        console.log(Latlngs); 
        var changedLine=[]; 
        for (var i = 0; i < Latlngs.length; i++) { 
         changedLine.push(Latlngs[i][1]); 
        } 
        console.log(changedLine); 
        Path.setMap(null); 
        draw(changedLine, map); 
       }); 

但由於所需的折線不清除。我如何清理舊路徑並重新繪製？

Answer 1

問題是創建標記。 當你創建你打電話draw不拆除現有Polyline（Path）

新的標記這會解決這個問題：

 function placeMarkerAndPanTo(latLng, map) { 

      var marker = new google.maps.Marker({ 
       position: latLng, 
       map: map, 
       draggable: true 
      }); 
      markers.push(marker); 
      marker.id = uniqueId; 
      Latlngs.push([uniqueId, latLng]); 
      uniqueId++; 
      console.log(Latlngs); 

      //draw(Line, map); 

      google.maps.event.addListener(marker, 'dragend', function(event) { 
       if(Path)Path.setMap(null); 
       var newLatLng = event.latLng; 

       var index = Latlngs.map(function(element) { 
        return element[0]; 
       }).indexOf(marker.id); 
       if (index !== -1) { 
        Latlngs[index] = [marker.id, newLatLng]; 
       } 


       var changedLine=[]; 
       for (var i = 0; i < Latlngs.length; i++) { 
        changedLine.push(Latlngs[i][1]); 
       } 


       draw(changedLine, map); 
      }); 
      google.maps.event.trigger(marker,'dragend', 
             {latLng:marker.getPosition()}) 

     } 

但也沒有必要繪製新的折線，折線，pathes可能直接修改：

function initMap() { 
 
    var goo  = google.maps, 
 
     map  = new goo.Map(document.getElementById('map'), { 
 
        zoom: 10, 
 
        center: new goo.LatLng(12.8799313333, 77.5991386667) 
 
        }), 
 
     line = new goo.Polyline({ 
 
             path:[], 
 
             geodesic: true, 
 
             strokeColor: '#FF0000', 
 
             strokeOpacity: 1.0, 
 
             strokeWeight: 2 , 
 
             map:map 
 
            }), 
 
     markers = new goo.MVCArray; 
 
     
 
     goo.event.addListener(map, 'click', function(e) { 
 
      var marker = new goo.Marker({ position:e.latLng, 
 
             map:map, 
 
             draggable:true}); 
 
      markers.push(marker); 
 
      //push new point to the path 
 
      line.getPath().push(marker.getPosition()); 
 
      
 
      goo.event.addListener(marker,'dragend',function(){ 
 
      //simply update the path 
 
      line.getPath().setAt(markers.indexOf(this), 
 
           this.getPosition()); 
 
      }); 
 
      goo.event.addListener(marker,'dblclick',function(){ 
 
      //remove marker and path-point 
 
      line.getPath().removeAt(markers.indexOf(this)); 
 
      markers.removeAt(markers.indexOf(this)); 
 
      this.setMap(null) 
 
      }); 
 
     }); 
 

 

 
    }

html,body,#map{height:100%;margin:0;padding:0;}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>