谷歌地图API v3 - getBounds未定义。

Question

谷歌地图API v3 - getBounds未定义。

84

我正在从v2切换到v3的谷歌地图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()未定义。

我尝试在点击事件中获取getBounds值，对我来说效果很好，但无法在加载地图事件中获得相同的结果。

在Google Maps API v2中，在文档加载时使用getBounds可以正常工作，但在V3中失败了。

您能否帮助我解决这个问题？

- DolceVita

6个回答

21

根据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());
    });
});

可以在这里看到它的运行效果。

- Salman A

这应该是被接受的答案。idle被调用的时间比等待所有瓷砖加载要早得多。 - treznik

@treznik：你是怎么确定idle事件在tilesloaded事件之前触发的？对我来说，tilesloaded事件总是在idle事件之前触发。 - Daniel Vassallo

如果您只需要函数运行一次，这是更好的解决方案。 - bbodenmiller

15

我之前说Salman的解决方案更好，因为它在tilesloaded事件之前调用了idle事件，因为它等待所有瓦片加载完成。但仔细一看，似乎bounds_changed的调用更早，并且这也更有意义，因为您正在寻找边界，对吗？:)

所以我的解决方案是：

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

- treznik

1

当这个问题被提出时，“bounds_changed”不起作用，因为“getBounds()”需要加载瓦片。感谢您的建议，我会更新我的答案。 - Daniel Vassallo

11

在这里的其他评论中，建议使用"bounds_changed"事件而不是"idle"事件，我同意这种做法。特别是在我的开发机器上触发“idle”之前会触发“bounds_changed”，至少在IE8下，导致getBounds返回空引用。

然而，“bounds_changed”事件将在拖动地图时持续触发。因此，如果你想使用此事件来开始加载标记，则会对你的Web服务器产生很大的压力。

我解决这个问题的多浏览器方案:

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

- Almer

1

这是我采用的方法，出于同样的原因 :-) - oodavid

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();

- Fernando

1

为2021年添加答案。

Map.getBounds() 可能最初会返回 undefined。解决此问题的首选方法是使用 bounds_changed 事件。通常，undefined 值仅在地图初始化时发生，以后不会再次出现。

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 12,
  center: new google.maps.LatLng(55.755327, 37.622166),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

map.addEventListener('bounds_changed', () => {
  console.log(map.getBounds());
});

https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed

- jpoehnelt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Vassallo · Accepted Answer

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