提交後再次繪製路徑，如何清除之前的路徑？

Question

谷歌地圖API和計算器中的新手。

我正在創建一個應用程序，我可以在地圖上繪製多條路線。起初，只有一個文本框，如果我輸入一個地址並點擊「計算」按鈕，它可以正常工作。 但是，如果再次單擊它，則會再次繪製路徑。 （路徑是深藍色的，這意味着有另一條藍色路線）

有沒有辦法以某種方式刷新地圖或清除以前繪製的路徑？

我的代碼是這樣的。我以這樣的方式編寫它，即將文本框的值添加到數組中，並使用此數組來計算路由。

form.onsubmit = function() { 
     //var okay = true; 
     var userAddressArray = []; 
     $("input.address").each(function(index) { 
     userAddressArray.push($(this).val()); 

     }); 
     num = 1; 
     for(var i=0; i < userAddressArray.length; i++){ 
      directionsVisible = false; 
      destination = userAddressArray[i]; 
      calcRoute(destination, num); 
      num = num + 1; 

     } 

     return false; 
    } 

這是我的calcRoute功能：

function calcRoute(inputAddress, number) { 
     if (!geocoder) { 
      geocoder = new google.maps.Geocoder(); 
     } 

     var geocoderRequest = { 
      address: inputAddress 
     } 

     geocoder.geocode(geocoderRequest, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 

       destinationLoc = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()); 
       //var dest = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()); 

      // compare this to an array of pre-loaded points 
       getClosestPath(destinationLoc); 
      //drawing the path 
       requestDirections(closest, destinationLoc, inputAddress, destinationLoc, number); 

      } 


     }); 

    } 

requestDirections功能：

var directionsService = new google.maps.DirectionsService(); 

功能requestDirections（開始，結束，地址，號碼）{

clearOverlays(); 

directionsService.route({ 
    origin: start, 
    destination: end, 
    avoidTolls: true, 
    travelMode: google.maps.TravelMode.WALKING 
}, function (result, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     renderDirections(result, address, number); 
    } 

    if (status == google.maps.DirectionsStatus.NOT_FOUND) { 
     alert("One of the locations you entered could not be geocoded."); 
    } 

    if (status == google.maps.DirectionsStatus.ZERO_RESULTS) { 
     alert("Invalid address entered, please enter a valid address."); 
    } 
}); 

}

renderDirections功能：

function renderDirections(result, address, number) { 

var myRoute = result.routes[0].legs[0]; 

for (var i = 0; i < myRoute.steps.length; i++) { 
} 
    var marker = new google.maps.Marker({ 
    position: myRoute.steps[i - 1].end_point, 
    map: map, 
    icon: "https://maps.gstatic.com/mapfiles/ms2/micons/green-dot.png" 

}); 

    var directionsRenderer = new google.maps.DirectionsRenderer({ 
     map: map, 
     suppressMarkers: true, 
     draggable: true 
    }); 
    markersArray.push(marker); 

    directionsRenderer.setMap(map); 
    //polylineOpts.setMap(map); 
    directionsRenderer.setDirections(result); 

} 

我希望這是不夠詳細，否則，讓我知道。我希望你能幫助我這個！

Answer 1

讓您的DirectionsRenderer全球（你原來的代碼創建爲每個路線請求一個新的）：

var directionsRenderer = null; 
function renderDirections(result, address, number) { 

var myRoute = result.routes[0].legs[0]; 

for (var i = 0; i < myRoute.steps.length; i++) { 
} 
    var marker = new google.maps.Marker({ 
    position: myRoute.steps[i - 1].end_point, 
    map: map, 
    icon: "https://maps.gstatic.com/mapfiles/ms2/micons/green-dot.png" 

}); 

    directionsRenderer = new google.maps.DirectionsRenderer({ 
     map: map, 
     suppressMarkers: true, 
     draggable: true 
    }); 
    markersArray.push(marker); 

    directionsRenderer.setMap(map); 
    //polylineOpts.setMap(map); 
    directionsRenderer.setDirections(result); 

}