清除/重置方向面板在谷歌地图API v3

Question

每次我们通过方向服务搜索路由时，结果将被附加到方向面板的底部。有些人建议将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>

Answer 1

应该可以:

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

Answer 2

清除方向面板:

directionsDisplay.setPanel(null);

启动方向面板:

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

…其中"directions_panel"是你想要加载方向的DIV。

同样适用于标记:

marker.setMap(null);

来自Google Maps Javascript API开发者指南

Answer 3

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

看一下演示中的代码:

  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的新实例，所以之前的实例不会更新。你需要每次都使用相同的实例，以便重新绘制地图上的路线(而不是覆盖在前一个实例创建的路线上)，并从面板中删除之前的方向(而不是将新方向简单地附加在前一个实例插入的方向之后)。