javascript - Google map 地点 javascript 文本搜索 : can't get radius to work

Question

我需要获取 google 地点结果(javascript，而不是地点 api)来显示基于文本搜索的地点列表。

除了半径参数之外，一切都工作正常，正如您在 JSFiddle 上看到的那样。

map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 15
});
var request = {
    location: pyrmont,
    radius: '5000',
    query: cat_search
};
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);

如果您点击“Restaurant”，则几乎没问题，如果您点击“Peintre”，它会得到超过 5000 半径的结果，如果您点击“Fastfood et Snack”，结果会变得疯狂，会返回 70000 m 半径的结果.

注意:我从 jsfiddle 上的脚本 URL 中删除了我的谷歌地图 key 。结果与 key 相同。关键与谷歌地图 javascript api 不相关？

Answer 1

参见the documentation ，位置和半径用于偏置结果，而不是限制结果。如果您不想显示半径之外的结果，可以将它们从显示的输出中删除。

文档指出:

bounds Type: LatLngBounds Bounds used to bias results when searching for Places (optional). Both location and radius will be ignored if bounds is set. Results will not be restricted to those inside these bounds; but, results inside it will rank higher.

location Type: LatLng|LatLngLiteral The center of the area used to bias results when searching for Places.

radius Type: number The radius of the area used to bias results when searching for Places, in meters.

删除指定半径之外的结果的代码片段

var map;
var service;

function initMap(param_lat, param_lng, cat_search) {

  var pyrmont = new google.maps.LatLng(param_lat, param_lng);

  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 15
  });

  var request = {
    location: pyrmont,
    radius: 5000,
    query: cat_search
  };


  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      var max_iteration = (results.length < 5) ? results.length : 5;
      var resultCount = 0;
      for (var i = 0; i < results.length; i++) {
        if (google.maps.geometry.spherical.computeDistanceBetween(results[i].geometry.location, pyrmont) < request.radius) {
          console.log(results[i]);
          var request2 = {
            placeId: results[i].place_id
          };
          service = new google.maps.places.PlacesService(map);
          service.getDetails(request2, callback2);
          resultCount++;
        }
      }
      if (resultCount == 0) {
        $("#res").prepend("No Results inside search area");
      }
    } else {
      $("#res").prepend("No Results, status " + status);
    }
  }
}



function callback2(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    var photos = place.photos;
    if (!photos) {
      temp_var = "<img width='30' src='" + place.icon + "' />";
    } else {
      temp_var = "<img  src='" + photos[0].getUrl({
        'maxWidth': 30,
        'maxHeight': 30
      }) + "' />";
    }
    temp_var += place.name;
    temp_var += " :" + (google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(50.4167, 4.4333), place.geometry.location) / 1000).toFixed(1) + " km [" + place.geometry.location.lat() + ", " + place.geometry.location.lng() + "]<br />";
    $("#res").prepend(temp_var);
  }
}

function toRad(Value) { // Converts numeric degrees to radians
  return Value * Math.PI / 180;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<a onclick="initMap( 50.4167, 4.4333,'Fastfood et Snack');">Fastfood et Snack</a>

<br />
<a onclick="initMap( 50.4167, 4.4333,'Restaurant');">Restaurant</a>

<br />
<a onclick="initMap( 50.4167, 4.4333,'Peintre');">Peintre</a>

<div id="map" style="display:none;"></div>
<div id="res"></div>