结果超出定义的半径google maps api

Question

我正在尝试获取我在一个形状中指定的所有位置。问题是结果超出了我指定的半径/边界。

这是我的代码：

function onCircleComplete(shape) {
  if (shape == null || (!(shape instanceof google.maps.Circle))) return;
    circle = shape;
    performSearch(circle);
}
function performSearch(shape) {
  var request = {
    location: shape.center,
    radius: shape.radius,
    keyword: 'restaurant'
  };
  service.radarSearch(request, callback);
}

有什么方法可以解决这个问题吗？

Answer 1

radarSearch方法，与使用textSearch和location字段的radius类似，引用the documentation：

  

位置和半径 - 您可以通过传递位置和radius参数将结果偏向指定的圆圈。这将指示Places服务更喜欢在该圈子中显示结果。仍然可以显示定义区域之外的结果。该位置采用google.maps.LatLng对象，半径采用一个简单的整数，表示圆的半径（以米为单位）。允许的最大半径为50 000米。

您可以使用此测试将显示的结果限制为仅限于圆圈内的结果：

if (google.maps.geometry.spherical.computeDistanceBetween(placeLoc, circle.getCenter()) > circle.getRadius())

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var map;
var circle;
var markers = [];

function initialize() {
  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 drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['circle']
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 0.4,
      strokeWeight: 5,
      strokeOpacity: 0.4,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'circlecomplete', onCircleComplete);
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);

  function onCircleComplete(shape) {
    if (shape == null || (!(shape instanceof google.maps.Circle))) return;
    circle = shape;
    google.maps.event.addListener(circle, 'radius_changed', function() {
      performSearch(circle);
    });
    google.maps.event.addListener(circle, 'center_changed', function() {
      performSearch(circle);
    })
    performSearch(circle);
  }

  function performSearch(shape) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    markers = [];
    var request = {
      location: shape.center,
      radius: shape.radius,
      keyword: 'restaurant'
    };
    service.radarSearch(request, 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;
    if (google.maps.geometry.spherical.computeDistanceBetween(placeLoc, circle.getCenter()) > circle.getRadius())
    // if marker outside circle, don't add it to the map
      return;

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

    google.maps.event.addListener(marker, 'click', function() {
      var that = this;
      service.getDetails({
        placeId: place.place_id
      }, function(result, status) {
        infowindow.setContent(result.name + "<br>" + result.formatted_address);
        infowindow.open(map, that);
      });
    });
    markers.push(marker);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,drawing"></script>
<div id="map_canvas"></div>

＆＃13;

＆＃13;

＆＃13;