Google Maps v3 getBounds is extending beyond what is visible on the map_问答_开发者

Google Maps v3 getBounds is extending beyond what is visible on the map

开发者 https://www.devze.com 2023-01-12 06:53 出处：网络

For some reason the getBounds() function for Google Maps v3 seems to be extending much further than what the map is actually showing.Correct me if I\'m wrong, but shouldn\'t it return the NE (top righ

For some reason the getBounds() function for Google Maps v3 seems to be extending much further than what the map is actually showing. Correct me if I'm wrong, but shouldn't it return the NE (top right corner) and SW (bottom left corner) latitude and longitude coordinates for the very corners of what's being shown in the current view?

I'm returning search results (which are mapped by a lat and lng) that are between these coordinates and am bei开发者_开发知识库ng returned results much further outside the area returned by getBounds(). Any ideas about what could be going on here?

Just FYI, I'm getting the bounds on the map's idle event:

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

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

...and using .lat() and .lng() to get the coordinates from the respective corners. Then I feed that to a SQL query that checks for results between those coordinates. Results are in the general area but can fall far outside what's actually being shown on the map.

Any ideas are appreciated! Thanks!

Correct, the map.getBounds() will return the bounds of the viewable area, as shown in the example below. In this example, a red Polyline box is drawn using the points of map.getBounds() when the idle event fires.

Your SQL query might not be returning the results you are looking for, and may need looked at again.

<!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>