Google Places Web API 在附近搜索上错误地抛出错误并破坏地图

Question

我正在尝试从 Places Web API 中提取一些地点，以便在地图上绘制一些标记。似乎它错误地抛出了一个错误：

Uncaught Error: Missing parameter. You must specify location.

in places_impl.js:35

我的代码如下：

var bounds = map.getBounds();
var service = new google.maps.places.PlacesService(map);

service.nearbySearch({
    bounds: bounds,
    type: ['natural_feature']
}, callback);

它应该按照文档工作：

此方法接受具有以下字段的请求：

以下之一： bounds，必须是定义矩形搜索区域的 google.maps.LatLngBounds 对象； 或

位置和半径；前者采用 google.maps.LatLng 对象，后者采用简单整数，以米为单位表示圆的半径。最大允许半径为 50 000 米。请注意，当 rankBy 设置为 DISTANCE 时，您必须指定位置，但不能指定半径或边界。

https://developers.google.com/maps/documentation/javascript/places#place_search_requests

Answer 1

问题是你调用服务时bounds无效。

地图是异步初始化的，直到bounds_changed 事件第一次触发时边界才可用。

等到'bounds_changed'事件在地图上触发后再使用map.getBounds()。

google.maps.event.addListener(map, 'bounds_changed', function() {
  var bounds = map.getBounds();
  var service = new google.maps.places.PlacesService(map);

  service.nearbySearch({
    bounds: bounds,
    type: ['natural_feature']
  }, callback);
});

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();

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
    });
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    var service = new google.maps.places.PlacesService(map);

    service.nearbySearch({
      bounds: bounds,
      type: ['natural_feature']
    }, callback);
  });

  function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        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", initialize);

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>