javascript - 从 Google 地图中删除路线

Question

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

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

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

如此处建议：谷歌地图版本 3 删除方向标记但无济于事。

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

任何帮助将不胜感激。

JA

Answer 1

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

为方向显示使用 1 个全局变量，当前方向将在您调用 setDirections() 以呈现新方向时立即被删除。

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



            });
        }