清除Google地图的多方向结果 [英] Clearing multiple direction results of a google map

问题描述

我在Ext Js 5.0.0框架中利用Google Maps V3 javascript API，以便在地图上显示路线。一切正常，除了一个测试用例，步骤如下：

I am leveraging Google Maps V3 javascript api within Ext Js 5.0.0 framework in order to display directions on a map. Everything works fine and directions are rendered and cleared perfectly except for one test case, steps described below:

步骤1.获取地址1到地址2的路线（工作正常，
步骤2.获取从地址3到地址4，5到6 ...（n-1）到n的路线（工作正常，所有路线都在地图上看到）
步骤3.执行 directionsDisplay.setMap（null），以清除地图上的所有路线组。

Step 1.Get Directions from address 1 to address 2 (works fine and displayed on map) Step 2.Get Directions from address 3 to address 4, 5 to 6...(n-1) to n (works fine and all sets of directions are seen on map) Step 3. Run directionsDisplay.setMap(null) to clear all sets of directions off the map.

在这种情况下，我观​​察到，只有（n-1） - > n个方向从地图上清除，并且剩余的以前搜索到的方向仍然存在。有没有办法完全清除所有方向的地图。

For this case I observe that only (n-1)->n directions are cleared off the map and the rest of the previously searched directions remain. Is there a way to clear the map completely of all directions.

我的清算功能代码如下。

Code for my clearing function is below.

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';


},

推荐答案

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

As I indicated in my comment, you are only keeping a reference to one of the DirectionRenderer objects. If you want to remove all the routes, you need to keep references to all of them and call setMap(null) on each one.

单向：

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="";
}

证明或概念小提琴

这篇关于清除Google地图的多方向结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！