Zeige nächste Elemente auf Google Karte

-4

Ich erstelle ein Projekt mit google map. Mein Projekt enthält die Krankenhausadresse (in Längengrad und Breitengrad), die in der Datenbank gespeichert werden soll. Aber ich möchte das nächste Krankenhaus von meinem derzeitigen Standort aus zeigen. Und ich kann nicht herausfinden, wie es geht. Bitte helfen Sie mir am besten Algorithmus und mit einige Code.Zeige nächste Elemente auf Google Karte

Der folgende Code wird nur verwendet, um alle Krankenhausadresse in der Karte jetzt anzuzeigen Ich will, wie nur 3 nächste Krankenhaus von meiner aktuellen Position zeigen.

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>

Quelle

2017-07-23 Sabita Neupane

Lesen Sie mehr über Places API [in der Nähe suchen] (https://developers.google.com/maps/documentation/javascript/places#place_search_requests). – xomena

dies Siehe example an. Ich habe deinen Code entsprechend angepasst.

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>

Quelle

2017-07-28 09:25:13

Zeige nächste Elemente auf Google Karte

Antwort

Verwandte Themen