Bagaimana saya dapat memeriksa apakah Google Maps sudah dimuat penuh?

293

Saya menanamkan Google Maps ke situs web saya. Setelah Google Maps dimuat, saya perlu memulai beberapa proses JavaScript.

Apakah ada cara untuk mendeteksi secara otomatis ketika Google Maps telah dimuat penuh, termasuk unduhan ubin dan semuanya?

Ada tilesloaded()metode yang seharusnya menyelesaikan tugas ini dengan tepat tetapi tidak berhasil .

javascript html google-maps Trigonometri
sumber
2
Acara "tilesloaded" tampaknya bekerja untuk saya. Itu menyala ketika halaman dimuat dan ketika saya memindahkan peta. Di peta Anda, apakah itu hanya tidak konsisten, atau tidak pernah berhasil?
Chris B
Tidak, tidak. "tilesloaded" seperti dikatakan akan dipecat setiap kali ubin baru dimuat yang berarti tidak hanya akan menyala saat memuat pertama juga, tetapi juga setiap kali Anda menyeret peta ke lokasi di mana ubin Anda belum dimuat.
Aivus
Tergantung jika Anda menggunakan addListener () atau addListenerOnce (). Anda benar tentang addListener () - karena itulah saya menggunakangoogle.maps.event.addListenerOnce(map, 'tilesloaded', function() {
vchrizz

Jawaban:

608

Ini mengganggu saya untuk sementara waktu dengan GMaps v3.

Saya menemukan cara untuk melakukannya seperti ini:

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

Acara "idle" dipicu ketika peta beralih ke status siaga - semua yang dimuat (atau gagal dimuat). Saya menemukan itu lebih dapat diandalkan kemudian tilesloaded / bounds_changed dan menggunakan addListenerOncemetode kode dalam penutupan dieksekusi pertama kali "idle" dipecat dan kemudian acara tersebut dilepaskan.

Lihat juga bagian acara di Referensi Google Maps.

ddinchev
sumber
15
Ini dipecat ketika peta masuk ke kondisi siaga (tidak ada lagi yang akan memuat). Kadang-kadang mungkin ada beberapa ubin yang tidak dimuat karena koneksi yang buruk sehingga bahkan jika ada bagian yang hilang, itu akan memicu acara idle pada akhirnya. Jika Anda perlu memastikan bahwa peta sudah selesai, tidak ada ubin yang hilang, dll, Anda harus mencari cara lain (misalnya acara "tilesloaded").
ddinchev
15
itu tidak berfungsi untuk saya .. pemicu sebelum sesuatu muncul di peta saya
zsitro
16
-1: Pemicu lebih cepat dari ubin dimuat / ditampilkan.
zbr
11
-1: untuk saya di chrome dan firefox, secara konsisten akan menyala segera setelah script dimuat tetapi sebelum ubin muncul. Mungkin itu tidak terlihat pada koneksi yang cepat, tetapi saya diberkati dengan koneksi yang sangat lambat. 'tilesloaded' sepertinya berhasil.
Xananax
1
Terima kasih untuk solusi itu - saya pikir inilah yang saya butuhkan. Apa yang saya tidak bisa membungkus kepala saya, mengapa google belum memasukkan hook siap sederhana? : -O
hasse
55

Saya membuat aplikasi seluler HTML5 dan saya perhatikan itu idle, bounds_changeddantilesloaded peristiwa kebakaran ketika objek peta dibuat dan dirender (bahkan jika itu tidak terlihat).

Untuk membuat kode run map saya ketika diperlihatkan untuk pertama kali saya melakukan hal berikut:

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
    });
});
Liukas Pyry
sumber
4
Fungsi tilesloaded pertama bekerja dengan baik untuk saya, tetapi fungsi tilesloaded kedua tidak pernah berjalan untuk saya.
Angsa
Saya mengerti Uncaught ReferenceError: map is not defined. Saya sudah mencoba menjalankan skrip dengan penundaan dan di akhir skrip saya yang lain tetapi sepertinya tidak berhasil.
Sam Willis
1
jika Anda mendefinisikan penangan acara di dalam penangan acara, Anda akan memiliki waktu yang buruk. saya akan sangat menyarankan Anda tidak melakukan ini, berikut ini adalah alternatif yang sedikit kurang hack yang mencapai hal serupa: gist.github.com/cmawhorter/a1b0b6a6b73678b97920f748ebca244b
Cory Mawhorter
15

Jika Anda menggunakan Maps API v3, ini telah berubah.

Di versi 3, Anda pada dasarnya ingin mengatur pendengar untuk bounds_changed acara tersebut, yang akan memicu saat memuat peta. Setelah itu dipicu, hapus pendengar karena Anda tidak ingin diinformasikan setiap kali batas viewport berubah.

Ini dapat berubah di masa mendatang karena V3 API berkembang :-)

timbo
sumber
2
Saya tidak menemukan ini bekerja untuk saya seandal mencari tilesloadedacara.
TMC
9

Jika Anda menggunakan komponen web , maka mereka memiliki ini sebagai contoh:

map.addEventListener('google-map-ready', function(e) {
   alert('Map loaded!');
});
Phillip Senn
sumber
3
Komentar yang mengerikan, salah di banyak tingkatan tidak tahu harus mulai dari mana.
malam
1
Mengapa Anda mengatakan "Komentar yang mengerikan, itu salah pada begitu banyak level sehingga saya tidak tahu harus mulai dari mana"?
Phillip Senn
3
Tetapi mengapa memberikan solusi menggunakan kerangka kerja yang berbeda dari sekadar google maps?
malam
Karena mungkin lebih baik?
Phillip Senn
HAHAHAHA @nights
Juan
5

GMap2::tilesloaded() akan menjadi acara yang Anda cari.

Lihat GMap2.tilesloaded untuk referensi.

Adam Markowitz
sumber
Saya telah membaca banyak tentang peristiwa tilesloaded () dan tampaknya itu sangat tidak konsisten ketika menyala. Ada opsi lain?
3

Di mana variabel mapadalah objek bertipe GMap2:

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

Dalam kasus saya, Gambar Ubin diambil dari url jarak jauh dan tilesloaded acara jauh dipicu sebelum membuat gambar.

Saya dipecahkan dengan mengikuti cara kotor. 

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
});
Bala
sumber
-4

Anda dapat memeriksa GMap2.isLoaded()metode ini setiap nmilidetik untuk melihat apakah peta dan semua ubinnya dimuat ( window.setTimeout()atau window.setInterval()Anda adalah teman Anda).

Meskipun ini tidak akan memberi Anda aktivitas penyelesaian pemuatan yang tepat, itu harus cukup baik untuk memicu Javascript Anda.

fbuchinger
sumber