最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Removing Directions from Google Maps - Stack Overflow

programmeradmin4浏览0评论

I'm displaying a list of places on a map using the google places api. Users can get directions to each of those places individually. The directions appear on the map fine and everything works, but each time they get directions to a different place it adds it to the map along with the old one(s). I want to overwrite the existing directions on the map when a new place is selected. So only one set of directions appear at anyone time. Ideally, I only want one route marked on the map and the one list of directions displayed.

I've tried adding the the following to clear all directions before I set the new ones:

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

As suggested here: Google Maps Version 3 Remove directions markers but to no avail.

No matter how much googling and search through the documentation I just can't seem to get it.

Any help would be greatly appreciated.

JA

I'm displaying a list of places on a map using the google places api. Users can get directions to each of those places individually. The directions appear on the map fine and everything works, but each time they get directions to a different place it adds it to the map along with the old one(s). I want to overwrite the existing directions on the map when a new place is selected. So only one set of directions appear at anyone time. Ideally, I only want one route marked on the map and the one list of directions displayed.

I've tried adding the the following to clear all directions before I set the new ones:

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

As suggested here: Google Maps Version 3 Remove directions markers but to no avail.

No matter how much googling and search through the documentation I just can't seem to get it.

Any help would be greatly appreciated.

JA

Share Improve this question edited May 23, 2017 at 11:52 CommunityBot 11 silver badge asked Apr 16, 2012 at 20:28 JimJim 7433 gold badges12 silver badges28 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

There is no need to clear the directions before rendering new ones.

Use 1 global variable for directionDisplay, the current directions will be removed as soon as you call setDirections() to render new directions.

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



            });
        }
发布评论

评论列表(0)

  1. 暂无评论