javascript - 在Google map 上明确路线

我正在尝试使用复选框显示/隐藏多个方向，但是在设置方向时无法隐藏或清除方向。我尝试了网上发现的几件事，但没有成功。

在我尝试的checbox==false内部


directionsRenderer.setMap(null);
directionsRenderer.setMap(null);directionsRenderer=null;directionsRenderer.setMap(map);
用directionsRenderer.setMap(null);重复整个功能
directionsDisplay.setMap(map);


和许多其他变化。 ...有什么帮助吗？

码：

var directionsService = new google.maps.DirectionsService;
function getvoznje() {
    if  (document.getElementById('voznje').checked==true)
    {
        function renderDirections(result) {
            var directionsRenderer = new google.maps.DirectionsRenderer;
            directionsRenderer.setOptions({
                preserveViewport: true,
                draggable: true,
                polylineOptions: {
                    strokeColor: "#00" + (Math.round(Math.random() * 0XFFFF)).toString(16)
                }
            });
            directionsRenderer.setMap(map);
            directionsRenderer.setDirections(result);
        }

        function requestDirections(start1, end1, start2, end2) {
            directionsService.route({
                origin: new google.maps.LatLng(start1,end1),
                destination: new google.maps.LatLng(start2,end2),
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function(result) {
                renderDirections(result);
            });
        }

        for (var i = 0;  i <put.length-3; i+=4){
            requestDirections(put[i], put[i+1], put[i+2], put[i+3]);
        }

     }

     if  (document.getElementById('voznje').checked==false)
     {
         directionsRenderer.setMap(null);
     }
 }

最佳答案

我将重新组织代码，以便不会在if语句内部创建函数。我希望这是一个可变范围的问题。

您正确地将null传递给setMap函数以从地图according to the documentation中删除路线：


  此方法指定将在其上呈现路线的地图。
  传递null即可从地图中删除路线。

var directionsService = new google.maps.DirectionsService,
    directionsRenderer = new google.maps.DirectionsRenderer;
function renderDirections(result) {
    directionsRenderer.setOptions({
        preserveViewport: true,
        draggable: true,
        polylineOptions: {
            strokeColor: "#00" + (Math.round(Math.random() * 0XFFFF)).toString(16)
        }
    });
    directionsRenderer.setMap(map);
    directionsRenderer.setDirections(result);
}
function requestDirections(start1, end1, start2, end2) {
    directionsService.route({
        origin: new google.maps.LatLng(start1,end1),
        destination: new google.maps.LatLng(start2,end2),
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function(result) {
        renderDirections(result);
    });
}
function getvoznje() {
    if  (document.getElementById('voznje').checked==true)
    {
        for (var i = 0;  i <put.length-3; i+=4){
            requestDirections(put[i], put[i+1], put[i+2], put[i+3]);
        }
    }

    if  (document.getElementById('voznje').checked==false)
    {
        directionsRenderer.setMap(null);
    }
}