Google Map API v3 中的清除/重置方向面板答案

【问题标题】：Clear / Reset Direction Panel in Google Map API v3Google Map API v3 中的清除/重置方向面板
【发布时间】：2013-05-16 13:17:45
【问题描述】：

每次我们通过方向服务搜索路线时，结果都会附加到方向面板的底部。有些人建议将 div 选项卡中的面板重置为 null... 任何人都可以建议如何操作...

function calcRoute() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    'map': map,
    'preserveViewport': false,
    'draggable': true
  });
  directionsDisplay.setPanel(
    document.getElementById("directions_panel")
  );

  // ... code to make Directions API request and display response ...
}

HTML 部分：

     <div id="directions_panel" style="width:90%"></div>

【问题讨论】：

example in the documentation 不是这样做的
感谢您的回复...以防我每次都无法初始化地图...因为包含许多其他功能...因此我在 calcRoute() 函数中声明了一个新的方向显示...有些人建议在 calcRoute() 函数的开头设置“directions_panel = null”，但它不起作用....
我想要的只是清除面板并使其可用于附加新的方向结果...
你能提供一个不起作用的例子（或者最好是代码）吗？
你试过document.getElementById("directions_panel").innerHTML = "";

标签： html google-maps-api-3 google-directions-api

【解决方案1】：

这应该可行：

  document.getElementById("directions_panel").innerHTML = "";

【讨论】：

这确实有效，但如果 DirectionsRenderer 被重复使用，则不需要。请参阅下面的答案。

【解决方案2】：

要清除方向面板：

directionsDisplay.setPanel(null);

使用以下命令启动方向面板：

directionsDisplay.setPanel(document.getElementById('directions_panel'));

...其中“directions_panel”是您希望加载路线的 DIV。

标记也是如此：

marker.setMap(null);

来自Google Maps Javascript API Developer Guides

【讨论】：

【解决方案3】：

我认为您的代码的问题在于您每次调用calcRoute 时都定义了一个新的DirectionsRenderer 服务。

从demo看这段代码：

  function initMap() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {lat: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

    var control = document.getElementById('floating-panel');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

    var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    directionsService.route({
      origin: start,
      destination: end,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

在initMap 函数中，创建了directionsDisplay 和directionsService 服务。然后，将它们传递给calculateAndDisplayRoute函数：

var onChangeHandler = function() {
  calculateAndDisplayRoute(directionsService, directionsDisplay);
};

calculateAndDisplayRoute 然后使用每个服务的这个现有实例，而不是重新创建 directionsDisplay 服务。

在您的代码中，您的 calcRoute 函数中有以下行：

directionsDisplay = new google.maps.DirectionsRenderer({
  ...
});

然后是对setPanel 的后续调用，依此类推。因为每次调用calcRoute 时都会创建DirectionsRenderer 的新实例，所以不会更新先前的实例。您每次都需要使用相同的实例，以便重新绘制地图上的路线（而不是覆盖在前一个实例创建的路线上）并从面板中删除以前的方向（而不是拥有新的方向）简单地附加在前一个实例插入的那些之后）。

【讨论】：