在谷歌地图上明确方向答案

【问题标题】：clear directions on google map在谷歌地图上明确方向
【发布时间】：2014-01-10 14:44:26
【问题描述】：

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

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

【问题讨论】：

标签： javascript routes directions

【解决方案1】：

我会重新组织代码，这样函数就不会在 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);
    }
}

【讨论】：

不幸的是，这不是解决方案。如果我们移动“var DirectionsRenderer = new google.maps.DirectionsRenderer;”在“renderDirections”功能之外，我们不能在地图上显示多个方向，但我们能够显示/清除该方向。有什么办法可以在相反的情况下明确方向吗？
如果我把“var directionRenderer;”在“renderDirections(result)”之前（即使其更具全局性）只是最后一个方向用“directionsRenderer.setMap(null);”清除
我想知道如何将它放在 initMap() 函数之外？我正在尝试做同样的事情，但是一旦我将 var DirectionsService = new google.maps.DirectionsService 放在 initMap() 函数之外，我就有错误说“google is not defined”

【解决方案2】：

有效的代码如下。

    var directionsService = new google.maps.DirectionsService;          
     var directionsRenderer=[];
     var cur=0; 

    function renderDirections(result) {
       directionsRenderer[cur] = new google.maps.DirectionsRenderer;
      directionsRenderer[cur].setOptions({ 
        preserveViewport: true, 
        draggable: true, 
        polylineOptions: {
            strokeColor: "#00" + (Math.round(Math.random() * 0XFFFF)).toString(16) , strokeOpacity:0.6
            } });
      directionsRenderer[cur].setMap(map);
      directionsRenderer[cur].setDirections(result);
      cur=cur+1;
    }

    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 getvoznjice() {
    for (var i = 0;  i <put.length-3; i+=4){
        requestDirections(put[i],put[i+1],put[i+2],put[i+3]);
       }
    }

function getvoznje() {    
    if  (document.getElementById('voznje').checked==true)  {
        cur=0;
        getvoznjice();
       } 
    if  (document.getElementById('voznje').checked==false) {
        for (var i = 0;  i <cur; i++){
        directionsRenderer[i].setMap(null); 
        }
       } 


}

【讨论】：