По какой-то причине функция getBounds ()
для Google Maps v3, похоже, расширяется намного дальше, чем то, что карта действительно отображается.Поправьте меня, если я ошибаюсь, но разве он не должен возвращать координаты широты и долготы NE (правый верхний угол) и SW (левый нижний угол) для самых углов того, что показано в текущем виде?
I ' m возвращает результаты поиска (которые отображаются с помощью широты и долготы), которые находятся между этими координатами, и я возвращаю результаты намного дальше за пределами области, возвращаемой getBounds ()
. Есть идеи о том, что здесь может происходить?
К вашему сведению, я получаю границы события простоя карты:
google.maps.event.addListener(map, 'idle', function() {
var bounds = map.getBounds();
var NE = bounds.getNorthEast();
var SW = bounds.getSouthWest();
... и использую .lat () и .lng (), чтобы получить координаты из соответствующие углы. Затем я передаю это в SQL-запрос, который проверяет результаты между этими координатами. Результаты находятся в общей области, но могут выходить далеко за рамки того, что на самом деле отображается на карте.
Любые идеи приветствуются! Спасибо!
Верно, map.getBounds ()
вернет границы видимой области, как показано в примере ниже. В этом примере красный прямоугольник Полилиния рисуется с использованием точек map.getBounds ()
при возникновении события idle
.
Ваш SQL-запрос может не возвращать те результаты, которые вы ищете, и, возможно, его нужно просмотреть еще раз.
<!DOCTYPE html>
<html>
<head>
<title>Bounds Box</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.405865,-87.283362);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var viewportBox;
google.maps.event.addListener(map, 'idle', function(event) {
var bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var viewportPoints = [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
/*strokeOpacity = 0 , if don't want to show the border moving. */
if (viewportBox) {
viewportBox.setPath(viewportPoints);
} else {
viewportBox = new google.maps.Polyline({
path: viewportPoints,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4
});
viewportBox.setMap(map);
};
var info = document.getElementById('info');
info.innerHTML = 'NorthEast: ' + ne.lat() + ' ' + ne.lng() +
'<br />' + 'SouthWest: ' + sw.lat() + ' ' + sw.lng();
});
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:500px"></div>
<div id="info"></div>
</body>
</html>