Google Haritalar'ın tamamen yüklü olup olmadığını nasıl kontrol edebilirim?


293

Google Haritalar'ı web siteme katıştırıyorum. Google Haritalar yüklendikten sonra birkaç JavaScript işlemini başlatmam gerekiyor.

Döşeme yüklemeleri ve tümü de dahil olmak üzere Google Haritalar'ın tam olarak yüklendiğinde otomatik olarak tespit etmenin bir yolu var mı?

tilesloaded()Bu görevi tam olarak yerine getirmesi gereken bir yöntem vardır, ancak işe yaramaz .


2
"Tilesloaded" olayı benim için çalışıyor gibi görünüyor. Sayfa yüklendiğinde ve haritayı hareket ettirdiğimde tetiklenir. Haritanızda tutarsız mı yoksa hiç çalışmıyor mu?
Chris B

Hayır sadece hayır. Dediği gibi "tilesloaded" yeni karolar her yüklendiğinde ateşlenecektir, bu da sadece ilk yükte ateş etmekle kalmayacak, aynı zamanda haritayı henüz karolarınızın henüz yüklenmediği yere sürüklediğinizde de açılacaktır.
Aivus

AddListener () veya addListenerOnce () kullandığınıza bağlıdır. google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
AddListener

Yanıtlar:


608

Bu GMaps v3 ile bir süre beni rahatsız ediyordu.

Ben böyle yapmak için bir yol buldum:

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

"Boşta" olayı, harita boşta durumuna geçtiğinde tetiklenir - yüklenen (veya yüklenemeyen her şey). Ben daha sonra tilesloaded / bounds_changed daha güvenilir bulundu ve addListenerOnceyöntemi kullanarak kapatma kodu "boşta" ilk kez yürütülür ve sonra olay ayrılır.

Google Haritalar Referansı'ndaki etkinlikler bölümüne de bakın .


15
Harita boşta durumuna geçtiğinde (başka bir şey yüklenmeyecek) tetiklenir. Bazen kötü bağlantı nedeniyle yüklenmeyen bazı karolar olabilir, bu yüzden böyle eksik parçalar olsa bile, sonunda boşta kalma olayını tetikler. Haritanın tamamlandığından, eksik döşemelerin vb. Olmadığından emin olmanız gerekiyorsa, başka bir yol aramanız gerekir (örneğin "tilesloaded" etkinliği).
ddinchev

15
benim için çalışmıyor .. benim harita üzerinde bir şey gösterilmeden önce tetikler
zsitro

16
-1: Döşemeler yüklendiğinde / görüntülendiğinden daha erken tetiklenir.
zbr

11
-1: chrome ve firefox'ta benim için, komut dosyası yüklenir yüklenmez ancak herhangi bir kutucuk gösterilmeden önce sürekli olarak tetiklenir. Belki hızlı bir bağlantıda belirgin değildir, ama çok yavaş bir bağlantıyla kutsanmışımdır. 'tilesloaded' çalışıyor gibi görünüyor.
Xananax

1
Bu çözüm için teşekkürler - Sanırım tam da ihtiyacım olan şey bu. Sadece kafamı saramıyorum ne, neden google basit bir hazır kanca koymak değil? : -O
hasse

55

Ben HTML5 Mobil uygulamalar oluşturmak ve ben fark ettim idle, bounds_changedvetilesloaded harita nesne oluşturulur ve (görünür olmasa bile) oluşturulduğunda olaylar yangın.

Haritamın ilk kez gösterildiğinde kodu çalıştırmasını sağlamak için aşağıdakileri yaptım:

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

4
İlk tilesloaded işlevi benim için iyi çalışıyor, ancak ikinci tilesloaded işlevi benim için asla çalışmıyor.
Kaz

Ben alıyorum Uncaught ReferenceError: map is not defined. Komut dosyasını bir gecikmeyle ve diğer komut dosyalarının sonunda çalıştırmayı denedim ama hiçbir şey işe yaramıyor.
Sam Willis

1
olay işleyicileri içinde olay işleyicileri tanımlıyorsanız, kötü zaman geçireceksiniz. Bunu yapmamanızı şiddetle tavsiye ederim, benzer bir şey elde eden biraz daha az acayip
Cory Mawhorter 15:16

15

Maps API v3 kullanıyorsanız bu durum değişti.

Sürüm 3'te, esasen bounds_changedolay için, harita yüklendiğinde tetiklenecek bir dinleyici ayarlamak istersiniz . Bu tetiklendiğinde, görüntü alanı sınırları her değiştiğinde bilgilendirilmek istemediğiniz için dinleyiciyi kaldırın.

V3 API geliştikçe bu durum gelecekte değişebilir :-)


2
Bunu benim için tilesloadedolayı araştırmak kadar güvenilir bulmuyorum.
TMC


9

Web bileşenlerini kullanıyorsanız , bunlar örnek olarak verilmiştir:

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

3
Korkunç yorum, yanlış birçok düzeyde nereden başlayacağını bilmiyorum.
gece

1
Neden "Korkunç yorum, nereden başlayacağımı bilmediğim pek çok seviyede yanlış" diyorsun?
Phillip Senn

3
Ancak neden yalnızca Google Haritalar'dan farklı bir çerçeve kullanarak bir çözüm sunalım?
geceler

Çünkü belki daha iyi?
Phillip Senn

HAHAHAHA @nights
Juan

5

GMap2::tilesloaded() aradığınız etkinlik olurdu.

Referanslar için bkz. GMap2.tilesloaded .


Tilesloaded () olayı hakkında çok şey okudum ve ateş ettiğinde son derece tutarsız görünüyor. Başka seçenekler var mı?

3

Değişkenin mapGMap2 türünde bir nesne olduğu durumlarda:

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

0

Benim durumumda, Döşeme Resmi uzak url'den yüklendi ve tilesloaded olay görüntüyü oluşturmadan önce tetiklendi.

Kirli yolu izleyerek çözdüm.

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

-4

Haritanın ve tüm döşemelerinin yüklenip yüklenmediğini ( veya arkadaşlarınız olup olmadığını) görmek için GMap2.isLoaded()yöntemi her nmilisaniyede bir kontrol edebilirsiniz.window.setTimeout()window.setInterval()

Bu size yükleme tamamlanma olayını tam olarak vermese de, Javascript'inizi tetikleyecek kadar iyi olmalıdır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.