如何使用lat和long从Google商家信息中获取Place_id

时间:2018-01-29 21:31:04

标签: javascript google-maps google-places-api

我试图为一系列商店退回Google评论。因此,每个商店都有一个独特的placeid,我首先需要找到它才能返回评论。我看到的所有教程都告诉我如何在自动填充字段上使用getPlace()来获取placeid,但我只有一个具有lat和long属性的模型,需要使用它们来获取place id。

Google提供的示例here

google.maps.places.Autocomplete(input).getPlace();

仅适用于自动填充。我希望我可以使用getPlace()并以某种方式插入lat和long来返回胎盘。

谢谢。

1 个答案:

答案 0 :(得分:0)

将PlaceService .nearbySearch与您的坐标一起使用。它将返回多个结果,很可能您要查找的结果是与输入坐标最接近的结果。

service = new google.maps.places.PlacesService(map);
var request = {
  location: searchLoc,
  radius: '50'
};
service.nearbySearch(request, function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    var bounds = new google.maps.LatLngBounds();
    var minDistance = Number.MAX_VALUE;
    var closestMarker = null;
    for (var i = 0; i < results.length; i++) {
      var marker = createMarker(results[i]);
      var distance = google.maps.geometry.spherical.computeDistanceBetween(searchLoc, marker.getPosition());
      if (distance < minDistance) {
        minDistance = distance;
        closestMarker = marker;
      }
    }
    closestMarker.setMap(map);
    map.setCenter(closestMarker.getPosition());
  }
});

proof of concept fiddle

screenshot of resulting map

代码段

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var infowindow = new google.maps.InfoWindow();
  var NeimanMarcus = new google.maps.LatLng(32.768863635112375, -117.16740846633911);
  var Nordstrom = new google.maps.LatLng(32.76856592648975, -117.1685242652893);

  service = new google.maps.places.PlacesService(map);
  findNearestPlace(Nordstrom, service, map, infowindow);
  findNearestPlace(NeimanMarcus, service, map, infowindow);

}
google.maps.event.addDomListener(window, "load", initialize);

function findNearestPlace(searchLoc, service, map, infowindow) {
  var request = {
    location: searchLoc,
    radius: '50'
  };
  service.nearbySearch(request, function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      var bounds = new google.maps.LatLngBounds();
      var minDistance = Number.MAX_VALUE;
      var closestMarker = null;
      for (var i = 0; i < results.length; i++) {
        var marker = createMarker(results[i], map, infowindow);
        var distance = google.maps.geometry.spherical.computeDistanceBetween(searchLoc, marker.getPosition());
        if (distance < minDistance) {
          minDistance = distance;
          closestMarker = marker;
        }
      }
      closestMarker.setMap(map);
      map.setCenter(closestMarker.getPosition());
    }
  });
}

function createMarker(place, map, infowindow) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    map.setCenter(marker.getPosition());
    map.setZoom(19);
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
  return marker;
}
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="map_canvas"></div>