Question

我正在利用Ext Js 5.0.0框架中的Google Maps V3 javascript api来显示地图上的路线。除了一个测试用例之外，一切正常并且方向被完美地渲染和清除，步骤如下：

步骤1.获取从地址1到地址2的指示（工作正常并在地图上显示）

步骤2.获取从地址3到地址4,5到6 ...（n-1）到n的指示（工作正常，所有方向都在地图上看到）

步骤3.运行 directionsDisplay.setMap（null），清除地图上的所有方向。

对于这种情况，我观察到只有（n-1） - > n个方向被清除掉地图，其余的先前搜索的方向仍然存在。有没有办法完全清除所有方向的地图。

我的清算功能代码如下。

resetDirections: function(){

    var me = this;
    Ext.getCmp('mapWidgetFrom').reset();
    Ext.getCmp('mapWidgetTo').reset();

    me.dirDsp.setMap(null);
    me.dirDsp.setPanel(null);
    document.getElementById('textDirections').style.display='none';


},

Answer 1

正如我在评论中指出的那样，您只是引用了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="";
}

proof or concept fiddle

代码段

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>

清除Google地图的多个方向结果

1 个答案: