获取用户的实时位置,并将它显示在 Google Map 上的 Marker 上。 计算用户位置和所有体检机构位置之间的距离,并找出最近的几个体检机构。 将最近的几个体检机构显示在 Google Map 上的 Marker 上,并在 Marker 上显示它们的名称和地址。 当用户点击这些 Marker 时,显示有关体检机构的更多详细信息。给出他们的详细代码
时间: 2023-06-24 20:07:15 浏览: 197
html5定位获取当前位置并在百度地图上显示
3星 · 编辑精心推荐
这个功能需要使用 Google Maps JavaScript API 和 Geolocation API。以下是示例代码:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>Find Nearest Health Clinics</title>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
在上面的代码中,需要将 `YOUR_API_KEY` 替换为你的 Google Maps JavaScript API 密钥。
JavaScript:
```
var map;
var userMarker;
var clinics = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.7749, lng: -122.4194}, // San Francisco
zoom: 13
});
// Get user's location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
userMarker = new google.maps.Marker({
position: pos,
map: map,
title: 'Your Location'
});
map.setCenter(pos);
getClinics(pos);
}, function() {
handleLocationError(true, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, map.getCenter());
}
}
function getClinics(pos) {
// Search for health clinics near user's location
var request = {
location: pos,
radius: '5000',
type: ['health']
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, function(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var clinic = {
name: results[i].name,
address: results[i].vicinity,
location: results[i].geometry.location
};
clinics.push(clinic);
}
showClinics();
}
});
}
function showClinics() {
// Sort clinics by distance from user's location
clinics.sort(function(a, b) {
var distanceA = google.maps.geometry.spherical.computeDistanceBetween(userMarker.getPosition(), a.location);
var distanceB = google.maps.geometry.spherical.computeDistanceBetween(userMarker.getPosition(), b.location);
return distanceA - distanceB;
});
// Show nearest clinics on map
for (var i = 0; i < Math.min(clinics.length, 5); i++) {
var clinic = clinics[i];
var marker = new google.maps.Marker({
position: clinic.location,
map: map,
title: clinic.name
});
marker.addListener('click', function() {
showClinicInfo(this);
});
}
}
function showClinicInfo(marker) {
// Get clinic info and show in info window
var service = new google.maps.places.PlacesService(map);
var request = {
placeId: marker.placeResult.place_id
};
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var content = '<div><strong>' + place.name + '</strong><br>' +
'Address: ' + place.vicinity + '<br>' +
'Phone: ' + place.formatted_phone_number + '<br>' +
'Website: <a href="' + place.website + '">' + place.website + '</a></div>';
var infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, marker);
}
});
}
function handleLocationError(browserHasGeolocation, pos) {
var infoWindow = new google.maps.InfoWindow({map: map});
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
```
在上面的代码中,需要将 `YOUR_API_KEY` 替换为你的 Google Maps JavaScript API 密钥。
这个代码会在页面加载时初始化地图,并获取用户的位置。然后它会搜索附近的医疗机构,并将最近的5个机构显示在地图上的Marker上。当用户点击Marker时,会显示有关机构的更多详细信息。
阅读全文