результаты из определенного радиуса 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:

РАСПОЛОЖЕНИЕ и радиус - Вы можете результаты смещения в заданный круг, передавая местоположение и параметр радиуса. Это даст указание службе «Места» лучше показывать результаты в пределах этого круга. Результаты за пределами определенной области могут отображаться. Местоположение принимает объект google.maps.LatLng, а радиус принимает простое целое число, представляющее радиус круга в метрах. Максимально допустимый радиус составляет 50 000 метров.

Вы можете ограничить отображаются результаты только тех, кто на самом деле в пределах круга с помощью этого теста:

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>