删除在Google地图上呈现的路线

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?

如果你必须清除标记，那么你应该在过程的生命周期的哪个阶段进行标记，以便在搜索之后出现新的旅程，但是旧标记会被删除？

3 个解决方案

#1

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.

要点是如果directionsDisplay！= null，我们不仅将null传递给setMap，我们也会在之后使整个对象无效，并且我发现这已经修复了它。

#2

This is the only part you need:

这是您需要的唯一部分：

// Clear past routes
    if (directionsDisplay != null) {
        directionsDisplay.setMap(null);
        directionsDisplay = null;
    }

#3

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