个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在构建一个功能，该功能将仅显示距用户当前位置最近的公园。现在，我的代码显示了用户附近的所有公园(给定半径)。
但我无法显示只有一个距离用户最近的公园。我的代码现在看起来像这样。有人可以帮助我告诉我如何只显示最近的公园吗？
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 80%;
width: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=**MY_KEY**&libraries=places,geometry"
async defer></script>
</head>
<body>
<div id="map"></div>
<script type ="text/javascript">
var map;
var coords;
var infowindow;
var markerPos;
var markers;
var place;
var directionsDisplay;
var directionsService;
//Retrives the location from the browser
x = navigator.geolocation;
x.getCurrentPosition(success, failure);
function success(position){
directionsDisplay = new google.maps.DirectionsRenderer;
directionsService = new google.maps.DirectionsService;
//Get user's longitude and latitude
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
//Creating new object for using the latitude and longitude values with Google Maps
coords = new google.maps.LatLng(myLat,myLong);
//Map options
var mapOptions = {
zoom: 13,
center: coords
}
map = new google.maps.Map(document.getElementById("map"),mapOptions);
infowindow = new google.maps.InfoWindow();
directionsDisplay.setMap(map);
directionsDisplay.setOptions( { suppressMarkers: true, preserveViewport: true } );
addNearByPlaces(coords);
// create marker on my postion
var myPos =new google.maps.Marker({
map:map,
position:coords,
animation: google.maps.Animation.BOUNCE
});
}
function failure(){
alert("Geolocation is not supported by the browser.");
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, coords, markerPos) {
// var selectedMode = document.getElementById('mode').value;
directionsService.route({
origin: coords, // Haight.
destination: markerPos, // Ocean Beach.
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode.WALKING
}, function(response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function addNearByPlaces(coords){
var service = new google.maps.places.PlacesService(map);
var request = {
location: coords,
//Defines the distance (in meters)
radius: 10936,
types: ['park']
};
service.nearbySearch(request, callback);
}
function callback(results, status) {
var markers = [];
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
markers.push(createMarker(results[i]));
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function(event) {
var latitude = this.position.lat();
var longitude = this.position.lng();
markerPos = {lat: latitude, lng: longitude};
calculateAndDisplayRoute(directionsService, directionsDisplay,coords, markerPos);
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
</script>
</body>
</body>
</html>
最佳答案
尝试将您的请求更改为
var request = {
location: coords,
rankBy: google.maps.places.RankBy.DISTANCE,
types: ['park']
};
然后在回调中查看 results[0] 以获得最接近的结果。
关于javascript - 谷歌地图显示最近的公园并带有标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50490117/
24
4
0
leaflet：一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档： https://leafletjs.cn/reference.html 官网（英文）： ht
我是一名优秀的程序员,十分优秀！