清除/重置Google Map API v3中的方向面板

每次我們通過方向服務搜索路線時，結果都會追加到方向面板的底部。有些人建議重置DIV標籤爲空面板...任何人都可以建議如何做到這一點...清除/重置Google Map API v3中的方向面板

function calcRoute() { 
    directionsDisplay = new google.maps.DirectionsRenderer({ 
    'map': map, 
    'preserveViewport': false, 
    'draggable': true 
    }); 
    directionsDisplay.setPanel(
    document.getElementById("directions_panel") 
); 

    // ... code to make Directions API request and display response ... 
}

HTML部分：

 <div id="directions_panel" style="width:90%"></div>

來源

2013-05-16 Jimmy Lee

這不是它[文檔中的示例]（https://google-developers.appspot.com/maps/documentation/javascript/examples/full/directions-panel） – geocodezip

感謝您的回覆。 .. 萬一我不能初始化地圖每次...因爲還有很多其他功能包括... ，因此我宣佈calcRoute（）函數內的一個新的方向Display ... 有些人建議在calcRoute（）函數的開始處設置'directions_panel = null'，但它不起作用.... –

我想要的只是清除面板並使其可用於追加新的方向結果... –

這應該工作：

document.getElementById("directions_panel").innerHTML = "";

來源

2013-05-16 15:24:10 geocodezip

我希望我能夠兩次或更多的讚揚這個！ – panhandel

這是行得通的，但如果'DirectionsRenderer'被重新使用則不需要。請參閱下面的答案。 – Alex

要清除路線面板：

directionsDisplay.setPanel(null);

啓動與方向面板：

directionsDisplay.setPanel(document.getElementById('directions_panel'));

...其中「directions_panel」是你的DIV，你想要的方向加載。

也是一樣的標記：

marker.setMap(null);

從Google Maps Javascript API Developer Guides

來源

2016-04-21 20:48:00 Andreas

我覺得你的代碼的問題是，你每次調用calcRoute時間定義一個新的DirectionsRenderer服務。

看從demo此代碼：

function initMap() { 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
    var directionsService = new google.maps.DirectionsService; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: {lat: 41.85, lng: -87.65} 
    }); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('right-panel')); 

    var control = document.getElementById('floating-panel'); 
    control.style.display = 'block'; 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control); 

    var onChangeHandler = function() { 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
    }; 
    document.getElementById('start').addEventListener('change', onChangeHandler); 
    document.getElementById('end').addEventListener('change', onChangeHandler); 
    } 

    function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    directionsService.route({ 
     origin: start, 
     destination: end, 
     travelMode: 'DRIVING' 
    }, function(response, status) { 
     if (status === 'OK') { 
     directionsDisplay.setDirections(response); 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 
    }

在initMap功能，將創建directionsDisplay和directionsService服務。然後，他們傳遞給的calculateAndDisplayRoute功能：

var onChangeHandler = function() { 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
};

的calculateAndDisplayRoute然後使用每個服務的現有實例，而不是重新創建directionsDisplay服務。

在代碼中，你有你的calcRoute功能下面一行：

directionsDisplay = new google.maps.DirectionsRenderer({ 
    ... 
});

再就是到setPanel等後續調用。由於每次調用calcRoute時都會創建一個新實例DirectionsRenderer，因此以前的實例不會更新。您需要每次都使用同一個實例，以便重繪地圖上的路線（而不是疊加在前一個實例創建的路線上），並從面板中移除先前的路線（而不是使用新路線）簡單地追加在先前實例插入的那些之後）。

來源

2017-06-22 02:34:04 Alex

清除/重置Google Map API v3中的方向面板

回答

相關問題