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 Developer Guides

Answer 3

我认为您的代码存在的问题是，每次拨打DirectionsRenderer时都会定义新的calcRoute服务。

从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的后续调用，依此类推。因为每次调用DirectionsRenderer时都会创建calcRoute的新实例，所以之前的实例不会更新。您需要每次都使用相同的实例，以便重新绘制地图上的路线（而不是覆盖前一个实例创建的路线）以及从面板中删除之前的路线（而不是使用新的路线）简单地附加在前一个实例插入的那些之后。）

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

3 个答案: