为什么这个 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 服务),将 origin
和 destination
设置为您的输入点。
这似乎对寻找最近的道路有更大的容忍度(尽管仍然有限)。
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
代码片段:
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>
问题
我正在使用 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 服务),将 origin
和 destination
设置为您的输入点。
这似乎对寻找最近的道路有更大的容忍度(尽管仍然有限)。
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
代码片段:
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>