问题描述
在 Google Maps API中有关图层的文档中,以下内容是说:
在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?
推荐答案
只需按照有关DirectionsRendererOptions的文档,您可以通过使用DirectionsRendererOptions中的suppressBicyclingLayer
选项来隐藏BicycleLayer:
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:
代码段:
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图层后将其关闭的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!