从 Google 地图中删除路线答案

【问题标题】：Removing Directions from Google Maps从 Google 地图中删除路线
【发布时间】：2012-04-16 20:28:41
【问题描述】：

我正在使用 google places api 在地图上显示地点列表。用户可以单独获取到每个地方的路线。路线在地图上显示得很好，一切正常，但是每次他们获得前往不同地点的路线时，都会将其与旧路线一起添加到地图中。选择新地点时，我想覆盖地图上的现有路线。因此，任何时候都只会出现一组方向。理想情况下，我只希望在地图上标记一条路线并显示一个路线列表。

在设置新方向之前，我已尝试添加以下内容以清除所有方向：

directionDisplay = new google.maps.DirectionsRenderer();
directionDisplay.suppressMarkers = true;
directionDisplay.setMap(null);

这里建议：Google Maps Version 3 Remove directions markers 但无济于事。

无论用多少谷歌搜索和搜索文档，我似乎都无法得到它。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

在渲染新的方向之前无需清除方向。

使用1个全局变量作为directionDisplay，一旦调用setDirections()渲染新的方向，当前的方向就会被移除。

【讨论】：

如何做到这一点，如果我根据这个解决方案绘制替代路线：stackoverflow.com/questions/18974512/… 这个解决方案每次在循环中为每条路线创建一个新的DirectionsRenderer，所以我不能使用上述解决方案.

【解决方案2】：

// in the global scope
var directions = [];

document.getElementById('submit').addEventListener('click', function () {
if (directions && directions.length > 0) {
  for (var i=0; i<directions.length; i++)
     directions[i].setMap(null);
  }
  directions = [];
  calculateAndDisplayRoute(directionsService, markerArray, stepDisplay, map, true, "SUBWAY");
});


function calculateAndDisplayRoute(directionsService,markerArray, stepDisplay, map, is_transit, transit_mode) {
            //var selectedMode = "TRANSIT";
            // First, remove any existing markers from the map.
            for (var i = 0; i < markerArray.length; i++) {
                markerArray[i].setMap(null);
            }

            if (is_transit == true){
                var request = {
                    origin: {lat: start_lat, lng: start_lon},
                    destination: {lat: end_lat, lng: end_lon},
                    travelMode: google.maps.TravelMode.TRANSIT,
                    transitOptions: {
                        modes: [google.maps.TransitMode[transit_mode]],
                    },
                    provideRouteAlternatives: true
                };
            }else{
                var request = {
                    origin: {lat: start_lat, lng: start_lon},
                    destination: {lat: end_lat, lng: end_lon},
                    travelMode: google.maps.TravelMode[transit_mode],
                    provideRouteAlternatives: true
                };
            }


            // Retrieve the start and end locations and create a DirectionsRequest using

            directionsService.route(request, function(response, status) {
                // Route the directions and pass the response to a function to create
                console.log(response)
                console.log(response.routes[0])

                var polyline = new google.maps.Polyline({
                    strokeColor: '#6855C9',
                    strokeOpacity: 1,
                    strokeWeight: 7
                });

                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = response.routes.length; i < len; i++) {

                        directions.push(new google.maps.DirectionsRenderer({
                            map: map,
                            directions: response,
                            routeIndex: i  ,
                            suppressMarkers: true
                        }));

                        //showSteps(response, markerArray, stepDisplay, map);
                    }
                } else {
                    window.alert('Directions request failed due to ' + status);
                }



            });
        }

【讨论】：