清除谷歌地图的多个方向结果

正如我在评论中指出的那样，您只保留了对DirectionRenderer对象之一的引用。如果你想删除所有的路由，你需要保留对所有路由的引用，并在每个路由上调用setMap(null)。

的一个方法:

var dirDspArray = [];
function findRoute() { //gets the directions
    var from = Ext.getCmp('from').getValue();
    var to = Ext.getCmp('to').getValue();
    dirSvc = new google.maps.DirectionsService();
    dirDsp =  new google.maps.DirectionsRenderer();
    travelMethod = Ext.getCmp('method').getValue();
    var directionsRequest = {
        origin: from,
        destination: to,
        travelMode: google.maps.DirectionsTravelMode[travelMethod],
        unitSystem: google.maps.UnitSystem.IMPERIAL
    };
    api = Ext.getCmp('mygooglemap').gmap;
    dirPanel = Ext.getCmp('textDirections');
    dirSvc.route(
    directionsRequest,
    function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            dirDsp.setMap(api);
            dirDsp.setPanel(document.getElementById('directions'));
            dirDsp.setDirections(response);
            dirDspArray.push(dirDsp);
        } else {
            alert('unable to retrieve');
        }
    });
}
function resetFields() {   //clears off all directions
    Ext.getCmp('from').reset();
    Ext.getCmp('to').reset();
    while (dirDspArray.length >0) {
      dirDsp = dirDspArray.pop();
      dirDsp.setMap(null);
      dirDsp.setPanel(null)
    }
    document.getElementById('directions').innerHTML="";
}

证明或概念提琴

代码片段:

Ext.onReady(function () {
    var el = 'ext-map';
    var api = null;
    var dirSvc = null;
    var dirDsp = null;
    var dirDspArray = [];
    var travelMethod = null;
    var dirPanel = 'directions';
    var w = Ext.create('Ext.Panel', {
        renderTo: el,
        title: 'Gmap',
        height: 600,
        width: 800,
        layout: 'border',
        items: [{
            region: 'west',
            title: 'Directions',
            collapsible: true,
            width: 150,
            items: [{
                xtype: 'textarea',
                id: 'from',
                fieldLabel: 'From',
                handler: addInfoWindow // reference to event handler function 
            }, {
                xtype: 'textarea',
                id: 'to',
                fieldLabel: 'To',
                handler: addInfoWindow // reference to event handler function 
            }, {
                xtype: 'combo',
                width: 150,
                fieldLabel: 'Travel Method',
                id: 'method',
                value: 'DRIVING',
                name: 'Travel Method',
                queryMode: 'local',
                store: ['DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'],
                displayField: 'title',
                autoSelect: true,
                forceSelection: true,
                matchFieldWidth: true,
                listConfig: {
                    maxHeight: 150
                }
            }, {
                xtype: 'button',
                text: 'Submit',
                handler: findRoute
            }, {
                xtype: 'button',
                text: 'Reset',
                handler: resetFields
            }]
        }, {
            xtype: 'gmappanel',
            region: 'center',
            id: 'mygooglemap',
            cls: 'reset-box-sizing',
            center: new google.maps.LatLng(53.5267, -1.13330),
            mapOptions: {
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        }]
    });
    /**
    
     * GMApPanel source code 
     * http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js
     */
    // get the map reference
    var map = w.down('gmappanel');
    function openInfoWindow(content, marker) {
        // create a info window
        var infowindow = new google.maps.InfoWindow({
            content: content,
            size: new google.maps.Size(50, 50)
        });
        infoBubble = new InfoBubble({
            content: '<div class="example">Some label</div>',
            shadowStyle: 1,
            padding: 10,
            borderRadius: 5,
            minWidth: 200,
            borderWidth: 1,
            disableAutoPan: true,
            hideCloseButton: false,
            backgroundClassName: 'example'
        });
        infoBubble.open(map.gmap, marker);
        var div = document.createElement('DIV');
        div.innerHTML = 'Hello';
        infoBubble.addTab('A Tab', div);
        infoBubble.addTab('A Tab', div);
    }
    function addInfoWindow() {
        // uses GMapPanel `addMarker` method to create a marker and attached it to tree.
        // Detailes - look at the source code of GMapPanel
        var marker = map.addMarker({
            lat: 53.5267,
            lng: -1.13330,
            title: 'Marker',
            // listeners can be added via configuration or after create 
            // using standard google maps API, i.e.
            // google.maps.event.addListener(marker, 'click', function() {...})            
            listeners: {
                click: function () {
                    openInfoWindow('hello', marker);
                }
            }
        });
    }
    function findRoute() { //gets the directions
        var from = Ext.getCmp('from').getValue();
        var to = Ext.getCmp('to').getValue();
        dirSvc = new google.maps.DirectionsService();
        dirDsp =  new google.maps.DirectionsRenderer();
        travelMethod = Ext.getCmp('method').getValue();
       
        var directionsRequest = {
            origin: from,
            destination: to,
            travelMode: google.maps.DirectionsTravelMode[travelMethod],
            unitSystem: google.maps.UnitSystem.IMPERIAL
        };
        api = Ext.getCmp('mygooglemap').gmap;
        dirPanel = Ext.getCmp('textDirections');
        dirSvc.route(
        directionsRequest,
        function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
               
                dirDsp.setMap(api);
                dirDsp.setPanel(document.getElementById('directions'));
                dirDsp.setDirections(response);
                dirDspArray.push(dirDsp);
            } else {
                alert('unable to retrieve');
            }
        });
    }
    function resetFields() {   //clears off all directions
        Ext.getCmp('from').reset();
        Ext.getCmp('to').reset();
        while (dirDspArray.length >0) {
          dirDsp = dirDspArray.pop();
          dirDsp.setMap(null);
          dirDsp.setPanel(null)
        }
        document.getElementById('directions').innerHTML="";
    }
    w.show();
});

.x-border-box .reset-box-sizing * {
    box-sizing: content-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
<script src="https://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-info-bubble/gh-pages/src/infobubble.js"></script>
<link href="https://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>
<div id='ext-map'></div>
<div id='directions'></div>