0

谷歌地图 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();

函数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.");
    }
});

}

渲染方向函数：

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

}

我希望这足够详细，否则请告诉我。我希望你能帮我解决这个问题！

4

1 回答 1

0

使您的方向渲染器全局化（您的原始代码为每个方向请求创建一个新的）：

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

}
于 2013-08-01T12:29:39.683 回答