谷歌地图放置javascript文本搜索:无法使半径工作

时间:2015-11-01 16:02:28

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

我需要获取谷歌地方结果(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);

如果您点击"餐厅"如果你点击" Peintre"几乎可以。它可以获得超过5000半径的结果,如果你点击" Fastfood et Snack"结果很疯狂,返回70000米半径的结果。

注意:我从jsfiddle上的脚本网址中删除了我的Google地图密钥。结果与密钥相同。谷歌地图javascript api的关键是不了解?

1 个答案:

答案 0 :(得分:3)

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

文档说明:

  

bounds 类型:LatLngBounds用于在搜索位置时偏置结果的边界(可选)。如果设置了边界,则将忽略位置和半径。 结果不仅限于这些范围内的人;但是,其中的结果将排名更高。

     

位置类型:LatLng | LatLngLiteral搜索地点时,用于偏见的区域的中心。

     

半径类型:数字搜索地点时用于偏差的区域半径,以米为单位。

代码段,用于删除指定半径以外的结果



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;
}
&#13;
<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>
&#13;
&#13;
&#13;