在谷歌地图上显示最近的元素答案

【问题标题】：Show nearest elements on google map在谷歌地图上显示最近的元素
【发布时间】：2017-07-23 13:59:01
【问题描述】：

我正在使用 google map 创建一个项目。我的项目包含要存储在数据库中的医院地址（经纬度）。但我想显示离我当前位置最近的医院。而且我无法弄清楚该怎么做。请用最好的算法和一些代码帮助我。

以下代码仅用于在地图中显示所有医院地址，现在我想要的是如何仅显示离我当前位置最近的 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>

【问题讨论】：

了解 Places API nearby search。

标签： javascript jquery google-maps

【解决方案1】：

看到这个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>

【讨论】：