使用谷歌地图api获取方向，无需使用地图

get direction with google maps api without using a map

本文关键字：地图 获取 谷歌地图 api 方向      更新时间：2024-02-29

嗨，我正在玩一个没有后端的前端项目，我希望它能获得从特定地方到另一个地方的运输方向。

我遇到的问题是，如果我是正确的，浏览器的谷歌地图api总是必须使用地图。

我只想从这个公共汽车站看下一班公共汽车。

它有很多关于不同事物的文档，我不确定该使用哪个api。我可以使用服务器api吗？

有谁能帮我？

谢谢！

不需要映射。Google Maps Javascript API v3 DirectionsService只需在"面板"（一个HTMLdiv）中呈现文本方向。

来自文件：

setPanel（panel:Node）|返回值：无此方法在中渲染方向。传递null以从面板中删除内容。

代码片段：（根据文档中的此示例修改）

function initMap() {
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService;
  directionsDisplay.setPanel(document.getElementById('right-panel'));
  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  };
  document.getElementById('start').addEventListener('change', onChangeHandler);
  document.getElementById('end').addEventListener('change', onChangeHandler);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.TRANSIT
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
  <strong>Start:</strong>
  <select id="start">
    <option value="chicago, il">Chicago</option>
    <option value="st louis, mo">St Louis</option>
    <option value="joplin, mo">Joplin, MO</option>
    <option value="oklahoma city, ok">Oklahoma City</option>
    <option value="amarillo, tx">Amarillo</option>
    <option value="gallup, nm">Gallup, NM</option>
    <option value="flagstaff, az">Flagstaff, AZ</option>
    <option value="winona, az">Winona</option>
    <option value="kingman, az">Kingman</option>
    <option value="barstow, ca">Barstow</option>
    <option value="san bernardino, ca">San Bernardino</option>
    <option value="los angeles, ca">Los Angeles</option>
  </select>
  <br>
  <strong>End:</strong>
  <select id="end">
    <option value="chicago, il">Chicago</option>
    <option value="st louis, mo" selected="selected">St Louis</option>
    <option value="joplin, mo">Joplin, MO</option>
    <option value="oklahoma city, ok">Oklahoma City</option>
    <option value="amarillo, tx">Amarillo</option>
    <option value="gallup, nm">Gallup, NM</option>
    <option value="flagstaff, az">Flagstaff, AZ</option>
    <option value="winona, az">Winona</option>
    <option value="kingman, az">Kingman</option>
    <option value="barstow, ca">Barstow</option>
    <option value="san bernardino, ca">San Bernardino</option>
    <option value="los angeles, ca">Los Angeles</option>
  </select>
</div>
<div id="right-panel"></div>

相关文章：