Google Maps Api v3 - getBounds 未定义

IT技术 javascript google-maps google-maps-api-3
2021-02-22 14:44:18

我正在从 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 中失败。

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

6个回答

在 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 个小时
2021-05-02 14:44:18
谢谢！这对我帮助很大
2021-05-09 14:44:18
2021-05-12 14:44:18
对于它的value，我发现，在 Android 手机上，getBounds 在第一次调用 bounds_changed后不可用，但在后续调用之后可用。将其更改为 tileloaded 修复了该问题（尽管进行了一些丑陋的刷新）。
2021-05-12 14:44:18
这正是我需要的！谢谢=）。它解决了我的问题。
2021-05-17 14:44:18

它应该可以工作，至少根据 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());
    });
});

看到它在这里工作。

这应该是公认的答案。在必须等待所有图块加载之前调用 idle 。
2021-04-22 14:44:18
如果您只需要该函数运行一次，这是更好的解决方案。
2021-05-01 14:44:18
@treznik：你是如何确定idle事件在tilesloaded事件发生之前被触发的？对我来说，tilesloaded事件在事件发生之前不断触发idle。
2021-05-04 14:44:18
这正是我要找的
2021-05-12 14:44:18

我是说 Salman 的解决方案更好，因为该idle事件的调用时间早于该事件tilesloaded，因为它会等待所有图块加载完毕。但仔细观察，它似乎bounds_changed被调用得更早，也更有意义，因为您正在寻找界限，对吧？:)

所以我的解决方案是：

google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
    alert(this.getBounds());
});
当问到这个问题时，bounds_changed不会起作用，因为getBounds()需要加载瓷砖。+1 表示建议。我会更新我的答案。
2021-05-21 14:44:18

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

但是，当您拖动地图时，“bounds_changed”事件将连续触发。因此，如果你想使用这个事件来开始加载标记，你的网络服务器会很重。

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

google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
   loadMyMarkers();
   google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});
这是我采用的方法，原因相同:-)
2021-05-17 14:44:18

好吧，我不确定我是否为时已晚，但这是我使用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();
其它你可能感兴趣的问题
上一篇ASP.NET MVC - 捆绑配置顺序 下一篇node.js 中的 require() 是如何工作的？