javascript - Google 行车路线至最近的道路

Question

我正在寻找在两个点之间创建行车路线，其中一个或两个点没有直接通往它的道路，但靠近它。

例如，如果您使用 DirectionsService 尝试在犹他州摩押和犹他州锡安国家公园之间创建一条行驶线路，您将得到 Zero_Results，因为没有通往锡安中心(谷歌返回的经纬度)的道路国家公园。如果您在 google.com/maps 上执行相同操作，您将看到一条从摩押到锡安国家公园东入口的驾车路线，以及步行到公园中心(放置图钉的地方)的路线。他们如何确定开车前往锡安国家公园的地点？

Answer 1

如果您reverse geocode锡安国家公园地理编码器返回的坐标 (37.2982022,-113.0263005)，第一个结果将是道路上最近的位置。

proof of concept fiddle

代码片段:

var geocoder;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var start = "Moab, UT";
  directionsDisplay.setMap(map);
  geocodeAddress("Zion National Park", start);
}

function geocodeAddress(address, start) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      geocoder.geocode({
        'location': results[0].geometry.location
      }, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          calculateAndDisplayRoute(start, results[0].geometry.location)
        } else {
          window.alert('Reverse Geocode failed due to: ' + status);
        }
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

function calculateAndDisplayRoute(start, end) {
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  }, 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", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>