从当前位置获取HTML内的HTML方向

时间:2017-11-07 04:40:13

标签: javascript html google-maps geocoding

我已将Google Directions Services代码实施到我的HTML中,并更改了选择标记以满足我的需求,并且一切正常。

我想知道是否可以将其中一个下拉选项设置为"我的当前位置"这将允许我显示从我当前位置到某处的路线。

每次我选择"我的当前位置"选项,发生以下错误:

Directions request failed due to NOT_FOUND

HTML选择Box Code:

<b>Start: </b>
    <select id="start">
      <option value="Current Location">My Current Location</option>
      <option value="New York">New York</option>
      <option value="Chicago">Chicago</option>
      <option value="Texas">Texas</option>
    </select>
    <b>End: </b>
    <select id="end">
      <option value="New York">New York</option>
      <option value="Chicago">Chicago</option>
      <option value="Texas">Texas</option>
    </select>

JavaScript代码:

<script>

      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('buildingMap'), {
          zoom: 7,
          center: {lat: 41.85, lng: -87.65}
        });
        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('end').addEventListener('change', onChangeHandler);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>

0 个答案:

没有答案