結果超出了定義的半徑谷歌地圖api

我想獲得所有的地方，我指定的形狀內。問題是結果超出了我指定的半徑/範圍。結果超出了定義的半徑谷歌地圖api

這裏是我的代碼：

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

有什麼辦法解決？

來源

2017-02-15 Ruben

的radarSearch方法，就像是textSearch遠一中location和radius領域的使用，從the documentation引用：

一個位置和半徑 - 你可以將結果偏向通過傳遞一個位置和一個半徑參數來指定一個圓。這將指示地方信息服務優先在該圈內顯示結果。定義區域之外的結果仍可能顯示。該位置需要一個google.maps.LatLng對象，並且半徑採用一個簡單的整數，表示圓的半徑（以米爲單位）。允許的最大半徑是50000米。

您可以限制顯示結果只能使用此測試與實際的圓內：

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>

來源

2017-02-15 04:04:06 geocodezip

感謝，這正是我想要的。 – Ruben

結果超出了定義的半徑谷歌地圖api

回答

相關問題