如何在 DirectionsRenderer 打开 Bicycling 层后将其关闭

2023-12-13

In Google Maps API 中有关图层的文档,规定如下:

Bicycling 图层对象将自行车道图层和/或特定于自行车的叠加层渲染到公共图层中。当请求骑行模式行驶方向时,默认情况下会在 DirectionsRenderer 中返回该图层。

在 DirectionsRenderer 打开此 Bicycling Layer 后,如何关闭它?我确实想显示自行车路线,但不希望自行车图层的所有绿线破坏地图的清晰度。

有没有办法“获取”当前的自行车图层,并以这种方式将其关闭/从地图上解除绑定?


只需通过 DirectionsRenderer 禁用 bicyclingLayer 的显示即可,按照DirectionsRendererOptions 的文档您可以使用以下方法抑制 BicycleLayersuppressBicyclingLayerDirectionsRendererOptions 中的选项:

抑制自行车层|类型:布尔值 |当请求骑行路线时,抑制 BicyclingLayer 的渲染。

概念证明小提琴

代码片段:

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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 DirectionsRenderer 打开 Bicycling 层后将其关闭 的相关文章

  • 有没有办法确定特定地址是否位于 x 英里内的路线沿线?

    有没有办法确定特定地址是否位于 x 英里内的路线沿线 Google 地图 API 是否支持此功能 我有一个地址数据库 我试图找出 Google 地图 API 确定的给定路线上的哪些位置 您可以设置获取折线 http code google
  • Google Places Api 排名=距离不起作用[重复]

    这个问题在这里已经有答案了 我使用 Google Places api 只获取距我所在位置最近的一些地点 但有些结果根本不显示 例如 tbilisimarriot 和 CourtyardbyMarriot 结果 而且列表也无法正确显示从最近
  • Google 地图 api 中的 infoWindow 数组

    我寻找错误 但找不到它 由于某种原因 任何谷歌地图信息窗口总是显示相同的信息 这是一个咖啡脚本代码 infowindow new google maps InfoWindow for company in companiesData mar
  • 删除 Google Maps API Premier 使用条款/徽标/等。链接?

    删除我的集成谷歌地图 谷歌地图总理 上显示的徽标 使用条款链接是否合法 问题是 当我放大地图时 链接往往会变得更长并记录并覆盖整个网站 这非常难看 当然可以给div容器一个 overflow hidden 标志有一点帮助 但仍不令人满意 T
  • 使用本地图块的 TileProvider

    我想使用新的TileProvider最新 Android Maps API v2 的功能可在地图上覆盖一些自定义图块GoogleMap 然而 由于我的用户很多时候都没有互联网 我想将图块存储在设备上的 zip 文件 文件夹结构中 我将使用生
  • 如何在 Google Maps API 中指示语言?

    就像你访问一样maps google com tw or maps google co kr or maps google co jp 您可以看到每个国家 地区都显示自己的语言 我可以在 Google 地图 API 中使用任何属性来动态设置
  • 从鼠标位置获取地图纬度经度

    我正在尝试将鼠标在谷歌地图上的位置转换为 LatLng 对象 我看到很多关于通过谷歌地图 点击 事件等获取位置的帖子 如下所示 google maps event addListener map click function event m
  • Google 地图无法使用 XHTML Doctype(文档类型)

    到底为什么如果我们在 Google 地图上使用 Doctype 总是有可能出现无法正确显示 Google 地图的问题 在最近的一个案例中 这个 Doctype 只花了我 2 天的时间 却没有任何生产力 多么令人厌恶的案件 这次我得到了一位同
  • 在 Swift 4 中在 Google 地图上显示路径

    我的问题是我想绘制两点之间的时间 并且我的两个位置都来自不同的控制器 for my first Location extension HomeViewController PickupLocationDelegate func didSel
  • Google 地图第二次无法加载 - AngularJS

    我正在使用 GoogleMap API angular google maps js 包 并且我有一个非常奇怪的行为 The first time I load it i get the full map loaded like here
  • 从 JSON 数组创建标记 php mySQL Google Maps v2 android

    我正在尝试从 mySQL 数据库在 Google Maps v2 上创建标记 但它不起作用 地图确实出现了 但没有标记 谁能告诉我出了什么问题以及我需要改变什么 我也尝试过让 getDouble 为 getDouble 0 和 getDou
  • Google 地图位于活动的中间区域

    我正在使用 Android studio 2 1 2 我检查了一下 大多数问题要么使用旧版本的 Android studio 要么使用一些旧的类 这些类不适用于我的情况 从文件 gt 新项目 gt 我使用了选项Google Maps Act
  • Google 地图 InfoBubble PixelOffset(从标记上方的默认位置移动)

    我正在尝试实现一个自定义 infoBubble 它的框打开到标记的侧面 而不是顶部的默认位置 事实证明这比预期的要困难 使用普通的infoWindow 您可以使用pixelOffset 请参阅此处文档 https developers go
  • 如何找到特定路线上两点之间的距离?

    我正在为我的大学开发一个 Android 应用程序 可以帮助学生跟踪大学巴士的当前位置 并为他们提供巴士到达他们的预计时间 截至目前 我获取了公交车的当前位置 通过公交车上的设备 和学生的位置 我陷入了必须找到两个 GPS 坐标之间的距离的
  • 绘制多边形

    我正在使用 Google Maps API V3 根据路径绘制多边形 该路径是随机未排序坐标点 LatLng 的数组 这会产生以下形状 Polylines intersect Problem 由于多边形的形状取决于路径中点的顺序 因此如何对
  • 使用 Google Places Autocomplete API 的 REQUEST_DENIED 响应

    我正在开发 Android 应用程序 它使用谷歌的地点自动完成 API 当尝试点击以下网址时 我得到的答复如下 预测 状态 REQUEST DENIED 我从下面的链接获得了 API 密钥Google API 控制台 http code g
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • Google 地图 - 使用自定义 json 样式*和* 地形视图

    因此 我创建了一些自定义 JSON 以使海洋更加饱和的蓝色 但现在似乎无法将地图默认为地形视图 它只是转到标准路线图视图 似乎无法弄清楚为什么会这样正在发生 有什么想法吗 function initialize Create an arra
  • 我实现了检查用户权限的方法,即使我在颤振中收到错误消息“MissingPluginException”?

    我实现了方法检查权限状态即使我收到一条错误消息 未处理的异常 MissingPluginException 在通道 flutter baseflow com permissions methods 上找不到方法 checkPermissio
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使

随机推荐