在Google地圖上顯示最近的元素

-4

我正在使用谷歌地圖創建項目。我的項目包含要存儲在數據庫中的醫院地址（位於經度和緯度）。但我想從當前位置向最近的醫院顯示。我無法弄清楚如何去做。請幫我用最好的算法和一些代碼。在Google地圖上顯示最近的元素

以下代碼僅用於顯示地圖中的所有醫院地址，現在我想要的是如何僅顯示距離當前位置最近的3家醫院。

function initMap() { 
 

 
    var mapType = google.maps.MapTypeId.ROADMAP; 
 
    var animationType = google.maps.Animation.DROP; 
 
    var currentLocationAnimationType = google.maps.Animation.BOUNCE; 
 
    var mapElement = document.getElementById('map'); 
 

 
    var nepalLocation = { 
 
    lat: 28.3949, 
 
    lng: 84.1240 
 
    }; 
 
    var mapOptions = { 
 
    center: nepalLocation, 
 
    zoom: 7, 
 
    mapTypeId: mapType, 
 
    }; 
 

 
    // actual map 
 
    map = new google.maps.Map(mapElement, mapOptions); 
 

 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var latlngbounds = new google.maps.LatLngBounds(); 
 
    var geocoder = geocoder = new google.maps.Geocoder(); 
 

 

 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(p) { 
 
     var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude); 
 
     var marker = new google.maps.Marker({ 
 
     position: LatLng, 
 
     map: map, 
 
     title: "My Location", 
 
     animation: currentLocationAnimationType 
 
     }); 
 
     google.maps.event.addListener(marker, "click", function(e) { 
 
     var infoWindow = new google.maps.InfoWindow(); 
 
     infoWindow.setContent(marker.title); 
 
     infoWindow.open(map, marker); 
 
     }); 
 
    }); 
 
    } else { 
 
    alert('Geo Location feature is not supported in this browser.'); 
 
    } 
 

 
    for (var i = 0; i < markers.length; i++) { 
 
    var data = markers[i] 
 
    var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
 
    var image = "img/iconHospital.png"; 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatlng, 
 
     map: map, 
 
     icon: image, 
 
     title: data.district, 
 
     animation: animationType 
 
    }); 
 

 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script> 
 
</head> 
 

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

 
</html>

來源

2017-07-23 Sabita Neupane

閱讀有關地方API [附近搜索（https://developers.google.com/maps/documentation/javascript/places#place_search_requests）。 – xomena

看到這個example的。我相應地調整了你的代碼。

function initMap() { 
 

 
    var mapType = google.maps.MapTypeId.ROADMAP; 
 
    var animationType = google.maps.Animation.DROP; 
 
    var currentLocationAnimationType = google.maps.Animation.BOUNCE; 
 
    var mapElement = document.getElementById('map'); 
 

 
    var nepalLocation = { 
 
    lat: 28.3949, 
 
    lng: 84.1240 
 
    }; 
 
    var mapOptions = { 
 
    center: nepalLocation, 
 
    zoom: 7, 
 
    mapTypeId: mapType, 
 
    }; 
 

 
    // actual map 
 
    map = new google.maps.Map(mapElement, mapOptions); 
 

 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var latlngbounds = new google.maps.LatLngBounds(); 
 
    var geocoder = geocoder = new google.maps.Geocoder(); 
 

 

 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(p) { 
 
     var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude); 
 
     var marker = new google.maps.Marker({ 
 
     position: LatLng, 
 
     map: map, 
 
     title: "My Location", 
 
     animation: currentLocationAnimationType 
 
     }); 
 
     google.maps.event.addListener(marker, "click", function(e) { 
 
     var infoWindow = new google.maps.InfoWindow(); 
 
     infoWindow.setContent(marker.title); 
 
     infoWindow.open(map, marker); 
 
     }); 
 
    }); 
 
    } else { 
 
    alert('Geo Location feature is not supported in this browser.'); 
 
    } 
 

 
    infowindow = new google.maps.InfoWindow(); 
 
    var service = new google.maps.places.PlacesService(map); 
 
    service.nearbySearch({ 
 
    location: nepalLocation, 
 
    radius: 50000, 
 
    type: ['hospital'] 
 
    }, callback); 
 
} 
 

 
function callback(results, status) { 
 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
    for (var i = 0; i < results.length; i++) { 
 
     if (i == 2) { 
 
     break; 
 
     } 
 
     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() { 
 
    infowindow.setContent(place.name); 
 
    infowindow.open(map, this); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script> 
 
    <style> 
 
    /* 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; 
 
    } 
 
    </style> 
 
</head> 
 

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

 
</html>

來源

2017-07-28 09:25:13

在Google地圖上顯示最近的元素

回答

相關問題