Google Maps v3 getBounds 超出了地图上的可见范围答案

【问题标题】：Google Maps v3 getBounds is extending beyond what is visible on the mapGoogle Maps v3 getBounds 超出了地图上的可见范围
【发布时间】：2011-04-01 23:01:40
【问题描述】：

出于某种原因，Google Maps v3 的 getBounds() 功能似乎比地图实际显示的内容扩展得更远。如果我错了，请纠正我，但它不应该返回当前视图中显示内容的各个角落的 NE（右上角）和 SW（左下角）纬度和经度坐标吗？

我正在返回这些坐标之间的搜索结果（由 lat 和 lng 映射），并且返回的结果在 getBounds() 返回的区域之外更远的地方。关于这里可能发生什么的任何想法？

仅供参考，我正在了解地图空闲事件的范围：

google.maps.event.addListener(map, 'idle', function() {

var bounds = map.getBounds();
var NE = bounds.getNorthEast();
var SW = bounds.getSouthWest();

...并使用 .lat() 和 .lng() 从各个角获取坐标。然后我将其提供给一个 SQL 查询，该查询检查这些坐标之间的结果。结果在一般区域内，但可能远远超出地图上实际显示的范围。

感谢任何想法！谢谢！

【问题讨论】：

注意：这实际上是由于一个更深层次的错误，某些标记被显示/不显示并且与错误的搜索结果相关联。当然，Google 会返回正确的结果。

标签： google-maps map mapping google-maps-api-3

【解决方案1】：

正确，map.getBounds() 将返回可视区域的边界，如下例所示。在此示例中，当idle 事件触发时，使用map.getBounds() 的点绘制了一个红色的Polyline 框。

您的 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>

【讨论】：

是的，实际上是一个不同的错误与标记让我混淆了。展示边界的好演示，谢谢。
@Ryan 你是否发现了标记的错误？我也遇到了同样的问题！