如何通过DirectionsRenderer启用Bicycling图层后将其关闭 [英] How to turn off the Bicycling layer after it gets turned on by the DirectionsRenderer

问题描述

在 Google Maps API中有关图层的文档中，以下内容是说:

"Bicycleing"图层对象将自行车路径和/或特定于自行车的覆盖层渲染为公共图层.请求旅行模式BICYCLING的方向时，默认情况下会在DirectionsRenderer中返回该图层.

The Bicycling layer object renders a layer of bike paths and/or bicycle-specific overlays into a common layer. This layer is returned by default within the DirectionsRenderer when requesting directions of travel mode BICYCLING.

在DirectionsRenderer将其打开后，如何关闭此Bicycling层?我确实想显示骑行路线，但不想让骑行层的所有绿线弄乱地图的清晰度.

How would one turn off this Bicycling Layer after it got turned on by the DirectionsRenderer? I do want to show the biking route, but don't want all the green lines of the Bicycling Layer mess up the clarity of the map.

是否有办法获取"当前的骑行图层"，并以这种方式将其关闭/从地图上取消绑定?

Is there a way to 'get' the current Bicycling Layer, and turn it off/unbind it from the map that way?

推荐答案

只需按照

Just disable the display of the bicyclingLayer by the DirectionsRenerer, per the documentation for the DirectionsRendererOptions you can suppress the BicycleLayer by using the suppressBicyclingLayer option in the DirectionsRendererOptions:

suppressBicyclingLayer |类型:布尔值|当请求骑车路线时，禁止显示BicyclingLayer.

suppressBicyclingLayer | Type: boolean | Suppress the rendering of the BicyclingLayer when bicycling directions are requested.

概念证明小提琴

代码段:

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>

这篇关于如何通过DirectionsRenderer启用Bicycling图层后将其关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！