Question

我正在从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()未定义。

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

在Google Maps API v2中加载文档时，getBounds也能正常工作，但在V3中失败了。

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

Answer 1

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

Answer 2

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

看到它正常工作here。

Answer 3

我说萨尔曼的解决方案更好，因为idle事件比tilesloaded事件更早被调用，因为它等待加载所有图块。但仔细看看，似乎bounds_changed被称为更早，它也更有意义，因为你正在寻找界限，对吗？：）

所以我的解决方案是：

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

Answer 4

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

然而，当您拖动地图时，将会连续触发“bounds_changed”事件。因此，如果您想使用此事件开始加载标记，那么您的网络服务器就会很重。

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

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

Answer 5

好吧，我不确定我是否为时已晚，但这是我使用 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();

Answer 6

添加 2021 年的答案。

Map.getBounds() 最初可能返回 undefined。对此的首选解决方法是使用 bounds_changed 事件。通常，未定义的值只会在地图初始化时发生，再也不会发生。

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

Google Maps Api v3 - getBounds未定义

6 个答案: