Làm cách nào tôi có thể kiểm tra xem Google Maps đã được tải đầy đủ chưa?

Tôi đang nhúng Google Maps vào trang web của mình. Khi Google Maps được tải, tôi cần khởi động một vài quy trình JavaScript.

Có cách nào để tự động phát hiện khi Google Maps đã được tải đầy đủ, bao gồm cả tải xuống ô xếp và tất cả không?

Một tilesloaded()phương thức tồn tại được cho là hoàn thành chính xác nhiệm vụ này nhưng nó không hoạt động .

Điều này đã làm phiền tôi trong một thời gian với GMaps v3.

Tôi tìm thấy một cách để làm điều đó như thế này:

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});

Sự kiện "nhàn rỗi" được kích hoạt khi bản đồ chuyển sang trạng thái không hoạt động - mọi thứ được tải (hoặc không tải được). Tôi thấy nó đáng tin cậy hơn sau đó xếp gạch / bound_changed và sử dụng addListenerOncephương thức mã trong bao đóng được thực thi lần đầu tiên "không hoạt động" được kích hoạt và sau đó sự kiện được tách ra.

Xem thêm phần sự kiện trong Tài liệu tham khảo Google Maps.

Tôi đang tạo các ứng dụng di động html5 và tôi nhận thấy rằng idle, bounds_changedvà tilesloadedcác sự kiện sẽ kích hoạt khi đối tượng bản đồ được tạo và hiển thị (ngay cả khi nó không hiển thị).

Để làm cho bản đồ của tôi chạy mã khi nó được hiển thị lần đầu tiên tôi đã làm như sau:

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    //this part runs when the mapobject is created and rendered
    google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
        //this part runs when the mapobject shown for the first time
    });
});

Nếu bạn đang sử dụng API Maps v3, điều này đã thay đổi.

Trong phiên bản 3, về cơ bản, bạn muốn thiết lập trình lắng nghe cho bounds_changedsự kiện, điều này sẽ kích hoạt khi tải bản đồ. Khi điều đó đã được kích hoạt, hãy xóa người nghe vì bạn không muốn được thông báo mỗi khi giới hạn khung nhìn thay đổi.

Điều này có thể thay đổi trong tương lai khi API V3 đang phát triển :-)

Năm 2018:

var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })

https://developers.google.com/maps/documentation/javascript/events

Nếu bạn đang sử dụng các thành phần web , thì chúng có ví dụ này:

map.addEventListener('google-map-ready', function(e) {
   alert('Map loaded!');
});

GMap2::tilesloaded() sẽ là sự kiện bạn đang tìm kiếm.

Xem GMap2.tilesloaded để tham khảo.

Trong đó biến maplà một đối tượng của kiểu GMap2:

    GEvent.addListener(map, "tilesloaded", function() {
      console.log("Map is fully loaded");
    });

Trong trường hợp của tôi, Hình ảnh Ngói được tải từ url và tilesloadedsự kiện từ xa đã được kích hoạt trước khi hiển thị hình ảnh.

Tôi đã giải quyết bằng cách làm theo cách bẩn.

var tileCount = 0;
var options = {
    getTileUrl: function(coord, zoom) {
        tileCount++;
        return "http://posnic.com/tiles/?param"+coord;
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.5,
    isPng: true
};
var MT = new google.maps.ImageMapType(options);
map.overlayMapTypes.setAt(0, MT);
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    var checkExist = setInterval(function() {
        if ($('#map_canvas > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > div').length === tileCount) {
            callyourmethod();
            clearInterval(checkExist);
        }
    }, 100); // check every 100ms
});

Bạn có thể kiểm tra GMap2.isLoaded()phương thức mỗi nmili giây để xem bản đồ và tất cả các ô của nó đã được tải chưa ( window.setTimeout()hoặc window.setInterval()là bạn bè của bạn).

Mặc dù điều này sẽ không cung cấp cho bạn sự kiện chính xác về việc hoàn thành tải, nhưng nó đủ tốt để kích hoạt Javascript của bạn.