谷歌映射Api v3 - getBounds未定义

I'm switching from v2 to v3 google maps api and got a problem with gMap.getBounds() function.

我从v2切换到v3谷歌映射api，并遇到了gMap.getBounds()函数的问题。

I need to get the bounds of my map after its initialization.

我需要在映射初始化后得到它的边界。

Here is my javascript code:

下面是我的javascript代码:


var gMap;
$(document).ready(

    function() {

        var latlng = new google.maps.LatLng(55.755327, 37.622166);
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);

        alert(gMap.getBounds());
    }
);

So now it alerts me that gMap.getBounds() is undefined.

现在它提醒我gMap.getBounds()没有定义。

I've tried to get getBounds values in click event and it works fine for me, but I cannot get the same results in load map event.

我尝试过在click事件中获取getBounds值，这对我来说很好，但是我不能在load map事件中得到相同的结果。

Also getBounds works fine while document is loading in Google Maps API v2, but it fails in V3.

在谷歌Maps API v2中加载文档时，getBounds也很有效，但在V3中失败。

Could you please help me to solve this problem?

你能帮我解决这个问题吗?

5 个解决方案

#1

121

In the early days of the v3 API, the getBounds() method required the map tiles to have finished loading for it to return correct results. However now it seems that you can listen to bounds_changed event, which is fired even before the tilesloaded event:

在v3 API的早期，getBounds()方法要求映射块完成加载，以便返回正确的结果。但是现在似乎可以监听bounds_changed事件，它甚至在加载tilesloaded事件之前就被触发:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps v3 - getBounds is undefined</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px;"></div> 

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: new google.maps.LatLng(55.755327, 37.622166),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      google.maps.event.addListener(map, 'bounds_changed', function() {
         alert(map.getBounds());
      });
   </script> 
</body> 
</html>

#2

It should be working, atleast according to the documentation for getBounds(). Nevertheless:

至少根据getBounds()的文档，它应该可以工作。然而:

var gMap;
$(document).ready(function() {
    var latlng = new google.maps.LatLng(55.755327, 37.622166);
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);
    google.maps.event.addListenerOnce(gMap, 'idle', function(){
        alert(this.getBounds());
    });
});

See it working here.

看到它在这里工作。

#3

I was saying Salman's solution is better because the idle event is called earlier than the tilesloaded one, since it waits for all the tiles to be loaded. But on a closer look, it seems bounds_changed is called even earlier and it also makes more sense, since you're looking for the bounds, right? :)

我说Salman的解决方案更好，因为空闲事件比tilesloaded事件更早被调用，因为它等待所有的tile被加载。但是仔细看一下，它看起来是bounds_changed更早调用它也更有意义，因为你在寻找边界，对吧?:)

So my solution would be:

所以我的解决方案是:

google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
    alert(this.getBounds());
});

#4

In other comments here, it's adviced to use the "bounds_changed" event over "idle", which I agree with. Certainly under IE8 which triggers "idle" before "bounds_changed" on my dev machine at least, leaving me with a reference to null on getBounds.

在这里的其他评论中，建议使用“bounds_changed”事件而不是“idle”，我同意这一点。当然是在IE8下，它至少在我的开发机器上的bounds_changed之前触发“idle”，在getBounds上留给我一个null的引用。

The "bounds_changed" event however, will be triggered continuously when you'll drag the map. Therefor, if you want to use this event to start loading markers, it will be heavy on your webserver.

然而，“bounds_changed”事件将在拖拽映射时持续触发。因此，如果您想要使用此事件来开始加载标记，那么您的webserver将会非常繁忙。

My multi browser solution to this problem:

我的多浏览器解决方案:

google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
   loadMyMarkers();
   google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});

#5

Well, i'm not sure if i'm too late, but here's my solution using gmaps.js plugin:

我不知道是不是太晚了，但这是我用gmaps的解决方案。js插件:

map = new GMaps({...});

// bounds loaded? if not try again after 0.5 sec
var check_bounds = function(){

        var ok = true;

        if (map.getBounds() === undefined)
            ok = false;

        if (! ok) 
            setTimeout(check_bounds, 500);
        else {
             //ok to query bounds here
              var bounds = map.getBounds();
        }   
    }

    //call it
    check_bounds();

#1

121

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps v3 - getBounds is undefined</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px;"></div> 

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: new google.maps.LatLng(55.755327, 37.622166),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      google.maps.event.addListener(map, 'bounds_changed', function() {
         alert(map.getBounds());
      });
   </script> 
</body> 
</html>

#2