Question

google maps API和stackoverflow中的新手。

我正在创建一个应用程序，我可以在地图上绘制多条路线。首先，只有一个文本框，如果我键入地址并单击“计算”按钮，它可以正常工作。但是，如果我再次单击它，则会再次绘制路径。（路径是深蓝色，意味着在另一个路径上有蓝色路径）

有没有办法以某种方式刷新地图或清除以前绘制的路径？

我的代码是这样的。我以这样的方式编写它，即文本框的值被添加到一个数组中，这个数组就是我用来计算路径的。

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();

function requestDirections（start，end，address，number）{

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);

}

提交后再次绘制路径，如何清除以前的路径？

1 个答案: