Javascript 删除在 Google 地图上呈现的路线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7886110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing routes rendered on a Google Map
提问by Karl
I'm trying to do something that I gather has been done quite a few times before, although I'm having some difficulty accomplishing it.
我正在尝试做一些我认为以前做过很多次的事情，尽管我在完成它时遇到了一些困难。
I have a webpage that displays three Google Maps.
我有一个显示三个 Google 地图的网页。
For each of these google maps, I have a text box that accepts a post code / zip code, and a "get directions" button.
对于这些谷歌地图中的每一个，我都有一个接受邮政编码/邮政编码的文本框和一个“获取路线”按钮。
Clicking on each of these buttons uses the google.maps.DirectionsService object to display ONE set of directions in ONE panel centered at the bottom of the page.
单击这些按钮中的每一个都会使用 google.maps.DirectionsService 对象在页面底部居中的一个面板中显示一组方向。
My issue arises when I try to find a new route by searching again. As you can see in the image below, both routes are rendered.
当我尝试通过再次搜索找到新路线时，出现了我的问题。如下图所示，两条路由都被渲染了。
I have one marker at the end which is in a markers collection.
我在末尾有一个标记，位于标记集合中。
I've read a few times now about how you can loop through this array and use marker.setMap(null) to clear this marker.
我已经阅读了几次关于如何循环遍历此数组并使用 marker.setMap(null) 清除此标记的内容。
However, I can't seem to clear the actual routes after each specific search.
但是，我似乎无法在每次特定搜索后清除实际路线。
Has anybody had any problems with clearing markers from multiple maps?
有没有人在清除多个地图上的标记时遇到任何问题？
Do you have to totally reset the map in some way?
您是否必须以某种方式完全重置地图？
If you have to clear markers, at what point in the lifecycle of the process should you do it so that your new journey appears after the search, but the old one is removed?
如果您必须清除标记，您应该在流程生命周期的哪个点执行此操作，以便您的新旅程在搜索后出现，但旧的已被删除？
回答by Karl
I use the same google.maps.DirectionsService object for all three Google maps, and they all call the same method to calculate directions, but passing in their own map object as a parameter.
我对所有三个 Google 地图使用相同的 google.maps.DirectionsService 对象，它们都调用相同的方法来计算方向，但将自己的地图对象作为参数传递。
function calcRoute(startPoint, location_arr) {
// Create a renderer for directions and bind it to the map.
var map = location_arr[LOCATION_ARR_MAP_OBJECT];
var rendererOptions = {
map: map
}
if(directionsDisplay != null) {
directionsDisplay.setMap(null);
directionsDisplay = null;
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
The gist being that if directionsDisplay != null, we not only pass null to setMap, we also nullify the whole object afterweards, and I found this fixed it.
要点是，如果 DirectionDisplay != null，我们不仅将 null 传递给 setMap，我们还使整个对象在穿戴后无效，我发现这修复了它。
回答by Friendly Code
This is the only part you need:
这是您唯一需要的部分：
// Clear past routes
if (directionsDisplay != null) {
directionsDisplay.setMap(null);
directionsDisplay = null;
}
回答by I dont know
I dont know the answer.... most likely all u need to do is depending on circumstances:
我不知道答案......很可能你需要做的就是根据情况：
// put the codes after direction service is declared or run directionsService //
directionsDisplay.setMap(null); // clear direction from the map
directionsDisplay.setPanel(null); // clear directionpanel from the map
directionsDisplay = new google.maps.DirectionsRenderer(); // this is to render again, otherwise your route wont show for the second time searching
directionsDisplay.setMap(map); //this is to set up again
回答by Shanaka Madusanka
This works for me
这对我有用
// on initiate map
// this listener is not necessary unless you use listener
google.maps.event.addListener(directionsRenderer, 'directions_changed', function () {
if(directionsRenderer.directions === null){
return;
}
// other codes
});
// on clear method
directionsRenderer.set('directions', null);
