Question

嗨，我正在玩一个没有后端的前端项目，我想让它从特定的地方转移到另一个地方。

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

我只是想从这个巴士站显示下一班巴士。

关于不同事情的文档很多，我不确定使用哪种api。我可以使用服务器api吗？

任何可以帮助我的google api pro？

谢谢！

Answer 1

不需要地图。 Google Maps Javascript API v3 DirectionsService只能在＆＃34;面板＆＃34;中呈现文字方向。（HTML div）。

来自the documentation：

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

代码段（已从this example in the documentation修改）

＆＃13;

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);

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<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>

＆＃13;

使用谷歌地图api获取方向而不使用地图

1 个答案: