javascript - 谷歌地图上的明确指示

Question

我尝试使用复选框显示/隐藏多个方向，但设置后无法隐藏或清除方向。我尝试了几件我在网上找到的东西，但没有成功。

在 checbox==false 我试过了

1. directionsRenderer.setMap(null);

2. directionsRenderer.setMap(null); directionsRenderer=空； directionsRenderer.setMap( map );

3. 使用directionsRenderer.setMap(null);

   重复整个函数
4. 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);
     }
 }  

Answer 1

我会重新组织代码，这样就不会在 if 语句中创建函数。我预计这是一个可变范围问题。

将 null 传递给 setMap 函数以从 map 中删除方向是正确的，according to the documentation :

This method specifies the map on which directions will be rendered. Pass null to remove the directions from the map.

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