Google Maps Api v3-getBounds未定义


83

我从v2切换到v3 google maps api,gMap.getBounds()功能出现问题。

初始化后,我需要获取地图的边界。

这是我的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());
    }
);

所以现在它提醒我gMap.getBounds()未定义。

我尝试在click事件中获取getBounds值,它对我来说很好,但是在加载映射事件中我无法获得相同的结果。

在Google Maps API v2中加载文档时,getBounds也可以正常工作,但在V3中失败。

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

Answers:


136

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

1
那正是我所需要的!谢谢=)。它解决了我的问题。
DolceVita 2010年

这对我来说非常有用,为此我几乎浪费了2个小时
arjuncc,2012年

谢谢!它对我有很大帮助
user15 2012年

这可能是有用的,以及stackoverflow.com/questions/832692/...
DAV

1
对于它的价值,我发现,在Android手机上,在第一次调用bounds_changed之后,getBounds不可用,但是在随后的调用之后才可用。将其更改为tileloaded固定的(尽管进行了一些难看的刷新)。
克里斯·雷

20

至少应该按照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());
    });
});

看到它在这里工作。


这应该是公认的答案。闲置的调用比必须等待所有瓦片加载的调用要早。
treznik 2010年

@treznik:您如何确定idle事件在tilesloaded事件发生之前被触发?对我来说,tilesloaded事件在事件发生之前就不断触发idle
丹尼尔·瓦萨洛

这正是我在寻找的东西
arjuncc

如果只需要函数运行一次,则这是更好的解决方案。
bbodenmiller 2014年

15

我说的是Salman的解决方案更好,因为该idle事件的调用要早于该事件tilesloaded,因为它等待所有图块被加载。但是仔细一看,似乎它bounds_changed被称为更早,并且也更有意义,因为您正在寻找界限,对吗?:)

所以我的解决方案是:

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

1
提出此问题时bounds_changed,按照getBounds()要求加载磁贴将无法正常工作。+1表示建议。我将更新我的答案。
丹尼尔·瓦萨洛

11

在这里的其他评论中,建议在我同意的“ idle”上使用“ bounds_changed”事件。当然,在IE8下,至少在我的开发机上的“ bounds_changed”之前会触发“ idle”,这给我留下了对getBounds上null的引用。

但是,当您拖动地图时,“ bounds_changed”事件将连续触发。因此,如果您想使用此事件来开始加载标记,则它将在您的Web服务器上繁重。

我的多浏览器解决此问题的方法:

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

1
由于相同的原因,这是我采用的方法:-)
oodavid 2012年

1

好吧,我不确定是否来不及,但是这是我使用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();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.