Google Maps Api v3 - getBounds 未定義

Question

我正在從 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()是未定義的。

我試圖在 click 事件中獲取 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());
    });
});

看到它在這里工作。

Answer 3

我是說 Salman 的解決方案更好，因為idle事件比tilesloaded事件更早地被調用，因為它等待所有的tile 被加載。 但是仔細觀察，似乎更早調用了bounds_changed並且它也更有意義，因為您正在尋找界限，對吧？ :)

所以我的解決方案是：

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

Answer 4

在這里的其他評論中，建議在“空閑”上使用“bounds_changed”事件，我同意這一點。 當然，在 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 個解決方案

解決方案1
137 已采納 2010-05-14 09:20:02

解決方案2
20 2010-05-14 09:27:33

解決方案3
15 2010-10-25 00:11:54

解決方案4
11 2012-01-11 11:32:04

解決方案5
1 2013-10-22 19:19:24

解決方案6
0 2021-04-15 05:31:20

Google Maps Api v3 - getBounds 未定義

問題描述

6 個解決方案

解決方案1 137 已采納 2010-05-14 09:20:02

解決方案2 20 2010-05-14 09:27:33

解決方案3 15 2010-10-25 00:11:54

解決方案4 11 2012-01-11 11:32:04

解決方案5 1 2013-10-22 19:19:24

解決方案6 0 2021-04-15 05:31:20

解決方案1
137 已采納 2010-05-14 09:20:02

解決方案2
20 2010-05-14 09:27:33

解決方案3
15 2010-10-25 00:11:54

解決方案4
11 2012-01-11 11:32:04

解決方案5
1 2013-10-22 19:19:24

解決方案6
0 2021-04-15 05:31:20