Google Maps Api v3 - getBounds là không xác định

Question 1

Tôi đang chuyển từ api google maps v2 sang v3 và gặp sự cố với gMap.getBounds()chức năng.

Tôi cần nhận được các giới hạn của bản đồ của mình sau khi khởi tạo nó.

Đây là mã javascript của tôi:


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

Vì vậy, bây giờ nó cảnh báo tôi rằng đó gMap.getBounds()là không xác định.

Tôi đã cố gắng nhận các giá trị getBounds trong sự kiện nhấp chuột và nó hoạt động tốt với tôi, nhưng tôi không thể nhận được kết quả tương tự trong sự kiện tải bản đồ.

Ngoài ra getBounds hoạt động tốt khi tài liệu đang tải trong Google Maps API v2, nhưng nó không thành công trong V3.

Bạn có thể vui lòng giúp tôi giải quyết vấn đề này?

Question 2

Trong những ngày đầu của API v3, getBounds()phương pháp này yêu cầu các ô bản đồ tải xong để nó trả về kết quả chính xác. Tuy nhiên, bây giờ có vẻ như bạn có thể lắng nghe bounds_changedsự kiện, sự kiện được kích hoạt ngay cả trước tilesloadedsự kiện:

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

Question 3

Nó sẽ hoạt động, ít nhất là theo tài liệu cho getBounds (). Tuy nhiên:

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

Xem nó hoạt động ở đây .

Question 4

Tôi đã nói rằng giải pháp của Salman tốt hơn vì idlesự kiện được gọi sớm hơn sự kiện tilesloaded, vì nó đợi tất cả các ô được tải. Nhưng xem xét kỹ hơn, nó có vẻ bounds_changedcòn được gọi sớm hơn và nó cũng có ý nghĩa hơn, vì bạn đang tìm kiếm các giới hạn, phải không? :)

Vì vậy, giải pháp của tôi sẽ là:

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

Question 5

Trong các nhận xét khác ở đây, tôi đồng ý với sự kiện "bounds_changed" để sử dụng sự kiện "bounds_changed". Chắc chắn là trong IE8, ít nhất là kích hoạt "nhàn rỗi" trước "bounds_changed" trên máy dev của tôi, để lại cho tôi tham chiếu đến null trên getBounds.

Tuy nhiên, sự kiện "bounds_changed" sẽ được kích hoạt liên tục khi bạn kéo bản đồ. Do đó, nếu bạn muốn sử dụng sự kiện này để bắt đầu tải các điểm đánh dấu, nó sẽ rất nặng trên máy chủ web của bạn.

Giải pháp đa trình duyệt của tôi cho vấn đề này:

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

Question 6

Chà, tôi không chắc liệu mình có đến quá muộn hay không, nhưng đây là giải pháp của tôi bằng cách sử dụng plugin 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();