javascript - 谷歌地图API，无法清除以前的路线

Question

下面是我用来从给定点生成路线的函数。我有几个地方可以让用户请求方向......如果用户第二次请求方向，那么第一条路线仍然显示在地图上，显然这看起来不太好。我怎样才能删除它？

base.getRoute = function(start, la, lo) {

        var directionsService = new google.maps.DirectionsService();

        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(base.map);
        directionsDisplay.setPanel(document.getElementById("drivingDirectionsPanel"));

        start+=",uk";
        var end = new google.maps.LatLng(la, lo);
        var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response,status) {
            if(status == google.maps.DirectionsStatus.OK) {


                $('#drivingDirectionsPanel').html('');
                directionsDisplay.setDirections(response);

                $('html, body').animate({ 
                      scrollTop: $('#drivingDirectionsPanel').offset().top 
                  }, 1500);

            } else {
                alert("There was a problem finding directions");
            }
        });         
    };

我试过添加一个

directionsDisplay.setMap(null);

但这不起作用。

有什么想法吗？谢谢

Answer 1

使方向显示“类”或全局变量，以便在呈现方向响应时清除面板。

Answer 2

我是这样做的：

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$.extend(map,{
    pv: {
        markerArray: [],
        areaCircle: null,
        userLocation: {
            latitude: 38.68551,
            longitude: -98.789062
        },
        removeAllMarkers: function(){
            for (var i = 0; i < this.markerArray.length; i++) {
                if (this.markerArray[i].directions) this.markerArray[i].directions.setMap(null);
                this.markerArray[i].setMap(null);
            }
        },
        removeAllDirections: function(){
            for (var i = 0; i < this.markerArray.length; i++) {
                if (this.markerArray[i].directions) this.markerArray[i].directions.setMap(null);
            }
        },
        geocoder: new google.maps.Geocoder(),
        directions: new google.maps.DirectionsService(),
        directionPanel: document.getElementById('directions'),
        center: null
    }
});

现在，每当我添加一个标记时，我都会在 markerArray 内添加对它的引用，然后当我想删除所有方向或所有标记时，我只需调用map.pv.removeAllDirections()或map.pv.removeAllMarkers()

Answer 3

directionsDisplay.setMap(null);
map.setZoom(8);
map.setCenter();

Answer 4

我使用上面建议的解决方案的组合来解决这个问题。因此，“directionsDisplay”需要是全局的，然后需要在您再次创建方向显示之前调用方向显示.setMap(null)，它将从地图中清除先前的路线。

这是代码：

    if(directionsDisplay != undefined) 
        directionsDisplay.setMap(null);

    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport:true});
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('dvDirResults'));

    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            $('#<%= lblGetDirError.ClientID %>').hide();
            $('#dvDirResults').html("");
            directionsDisplay.setDirections(response);
            map.panToBounds(response.routes[0].bounds);
            map.setCenter(response.routes[0].bounds.getCenter()); 
            //map.fitBounds(response.routes[0].bounds);
            if(map.getZoom() < 10) map.setZoom(10);
        }
        else
            $('#<%= lblGetDirError.ClientID  %>').show();
    });