为什么这个 lat/lon 坐标不能在 Google 地图 API 中找到最近的道路

Why doesn't this lat/lon coordinate find nearest road in Google Maps API

问题

我正在使用 Google 地图 API 最近的道路找到给定 lat/lon 坐标的最近的道路。 我已经 运行 变成了 lat/lon 坐标,但没有 return 任何东西,我不知道为什么。此 lat/lon 坐标的位置紧邻北卡罗来纳州的一条公路。

https://roads.googleapis.com/v1/nearestRoads?points=35.77747,-82.4603&key=`{GOOGLE_API_KEY}`

为什么会这样 return {}

Google地图位置

我猜你的点离公路太远了。

您可能想要使用 DirectionsService(Web 服务),将 origindestination 设置为您的输入点。

这似乎对寻找最近的道路有更大的容忍度(尽管仍然有限)。

https://maps.googleapis.com/maps/api/directions/json?origin=35.77747,-82.4603&destination=35.77747,-82.4603&key=`{GOOGLE_API_KEY}`

returns:

// snip
   "end_location" : {
      "lat" : 35.777998,
      "lng" : -82.4598565
   },
// snip
   "start_location" : {
      "lat" : 35.777998,
      "lng" : -82.4598565
   },
// snip

相关问题:

  • Maps API - Marker on the street
  • Google maps api - snap marker to nearest road

proof of concept fiddle

代码片段:

const point = {
  lat: 35.77747,
  lng: -82.4603
}

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    preserveViewport: true
  });
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 18,
    center: point,
  });
  const marker = new google.maps.Marker({
    map: map,
    position: point,
    title: "input point"
  })
  directionsRenderer.setMap(map);

  calculateAndDisplayRoute(directionsService, directionsRenderer);
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  directionsService.route({
      origin: point,
      destination: point,
      travelMode: google.maps.TravelMode.DRIVING,
    },
    (response, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
      } else {
        window.alert("Directions request failed due to " + status);
      }
    }
  );
}
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>Directions Service</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>

</html>