如何在DirectionsRenderer

Question

在the documentation on Layers in the Google Maps API中，陈述如下：

  

Bicycling图层对象将一层自行车道和/或自行车专用叠加层渲染到公共图层中。在请求旅行模式BICYCLING的方向时，默认情况下会在DirectionsRenderer中返回此图层。

在DirectionsRenderer开启后，如何关闭这个自行车层？我确实希望展示骑行路线，但不希望骑行层的所有绿线都弄乱了地图的清晰度。

有没有办法“获取”当前的自行车层，并将其从地图上取下/取消绑定？

Answer 1

只需禁用DirectionsRenerer显示的bicyclingLayer，根据documentation for the DirectionsRendererOptions，您可以使用DirectionsRendererOptions中的suppressBicyclingLayer选项取消BicycleLayer：

  

suppressBicyclingLayer |输入：boolean |当要求骑自行车的方向时，禁止渲染BicyclingLayer。

proof of concept fiddle

代码段

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

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

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

<div id="floating-panel">
  <b>Start: </b>
  <input id="start" value="New York, NY" />
  <br><b>End: </b>
  <input id="end" value="Newark, NJ" />
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

Answer 2

您可以只使用layer.setMap(null)。

类似的东西：

var map = new google.maps.Map(document.getElementById('myMap')
var bikeLayer = new google.maps.BicyclingLayer();
document.getElementById("showBikeLayer").addEventListener("click", function(){
  bikeLayer.setMap(map);
});
document.getElementById("hideBikeLayer").addEventListener("click", function(){
  bikeLayer.setMap(null);
});