结果超出定义的半径 google 地图 api

Question

我正在尝试获取我在形状内指定的所有位置。问题是结果超出了我指定的 radius/bounds。

这是我的代码：

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 方法，就 location 和 radius 字段的用法而言，类似于 textSearch，引用自 the documentation：

a location and a radius — You may bias results to a specified circle by passing a location and a radius parameter. This will instruct the Places service to prefer showing results within that circle. Results outside the defined area may still be displayed. The location takes a google.maps.LatLng object, and the radius takes a simple integer, representing the circle's radius in meters. The maximum allowed radius is 50 000 meters.

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

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

proof of concept fiddle

代码片段：

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);

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

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

结果超出定义的半径 google 地图 api

results out of the defined radius google maps api

javascript

google-maps-api-3

google-maps-markers