ฉันจะตรวจสอบว่า Google แผนที่เต็มแล้วได้อย่างไร

293

ฉันฝัง Google Maps ไว้ในเว็บไซต์ของฉัน เมื่อโหลด Google Maps แล้วฉันจะต้องเริ่มกระบวนการจาวา

มีวิธีตรวจจับอัตโนมัติเมื่อ Google แผนที่โหลดเต็มรวมถึงการดาวน์โหลดไทล์และทั้งหมดหรือไม่

tilesloaded()วิธีการมีอยู่ว่าควรจะบรรลุว่างานนี้ แต่มันไม่ทำงาน

javascript html google-maps

2

ดูเหมือนว่าเหตุการณ์ "tilesloaded" จะใช้งานได้สำหรับฉัน มันยิงเมื่อหน้าโหลดและเมื่อฉันย้ายแผนที่ไปรอบ ๆ บนแผนที่ของคุณมันไม่สอดคล้องกันหรือไม่ทำงานเลยเหรอ?

— 394 Chris B

ไม่เพียงแค่ไม่มี. "tilesloaded" ตามที่ระบุว่าจะถูกยิงทุกครั้งที่มีการโหลดแผ่นใหม่ซึ่งหมายความว่าจะไม่เพียงเริ่มทำงานในการโหลดครั้งแรกเท่านั้น แต่ยังทุกครั้งที่คุณลากแผนที่ไปยังตำแหน่งที่ยังไม่ได้โหลดแผ่นงานของคุณ

— Aivus

ขึ้นอยู่กับว่าคุณใช้ addListener () หรือ addListenerOnce () คุณถูกต้องเกี่ยวกับ addListener () - นั่นเป็นเหตุผลที่ฉันใช้google.maps.event.addListenerOnce(map, 'tilesloaded', function() {

— vchrizz

608

นี่รบกวนฉันซักพักด้วย GMaps v3

ฉันพบวิธีที่จะทำสิ่งนี้:

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

เหตุการณ์ "ไม่ได้ใช้งาน" จะเกิดขึ้นเมื่อแผนที่ไปสู่สถานะไม่ได้ใช้งาน - ทุกอย่างที่โหลด (หรือโหลดไม่สำเร็จ) ฉันพบว่ามันน่าเชื่อถือมากขึ้นแล้ว tilesloaded / bounds_changed และการใช้addListenerOnceวิธีการรหัสในการปิดจะถูกดำเนินการในครั้งแรกที่ "ว่าง" ถูกไล่ออกและจากนั้นเหตุการณ์จะถูกถอดออก

ดูส่วนกิจกรรมในการอ้างอิง Google Maps

— ddinchev
แหล่งที่มา

15

มันจะถูกยิงเมื่อแผนที่ไปสู่สถานะไม่ได้ใช้งาน (จะไม่มีอะไรโหลดอีก) บางครั้งอาจมีบางแผ่นที่ไม่โหลดเนื่องจากการเชื่อมต่อไม่ดีดังนั้นแม้ว่าจะมีชิ้นส่วนที่ขาดหายไปมันจะทำให้เกิดเหตุการณ์ที่ไม่ได้ใช้งานในที่สุด หากคุณต้องการตรวจสอบให้แน่ใจว่าแผนที่เสร็จสมบูรณ์ไม่มีไทล์หายไป ฯลฯ คุณควรหาวิธีอื่น (เช่นเหตุการณ์ "tilesloaded")

— ddinchev

15

มันไม่ทำงานสำหรับฉัน .. ทริกเกอร์ก่อนที่ทุกอย่างจะปรากฏขึ้นบนแผนที่ของฉัน

— zsitro

16

-1: ทริกเกอร์เร็วกว่าไทล์จะถูกโหลด / แสดง

— zbr

11

-1: สำหรับฉันใน chrome และ firefox มันจะยิงอย่างสม่ำเสมอทันทีที่สคริปต์โหลด แต่ก่อนที่ไทล์จะแสดง อาจจะไม่ชัดเจนในการเชื่อมต่อที่รวดเร็ว แต่ฉันได้รับพรอย่างช้ามาก ดูเหมือนว่า 'tilesloaded' จะทำงานได้

— Xananax

1

ขอบคุณสำหรับการแก้ปัญหา - ฉันคิดว่านี่เป็นสิ่งที่ฉันต้องการ สิ่งที่ฉันไม่สามารถห่อหัวของฉันไปรอบ ๆ ทำไมในโลก google ไม่ได้ใส่เบ็ดพร้อมง่ายๆ? : -O

— hasse

55

ฉันกำลังสร้างปพลิเคชันมือถือ HTML5 และผมสังเกตเห็นว่าidle, bounds_changedและtilesloadedเหตุการณ์ไฟไหม้เมื่อวัตถุแผนที่ถูกสร้างขึ้นและแสดงผล (แม้ว่ามันจะมองไม่เห็น)

วิธีทำให้รหัสแผนที่ของฉันทำงานเมื่อแสดงเป็นครั้งแรกที่ฉันทำสิ่งต่อไปนี้:

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

— Pyry Liukas
แหล่งที่มา

4

ฟังก์ชั่นไทล์โหลดแบบครั้งแรกทำงานได้ดีสำหรับฉัน แต่ฟังก์ชั่นไทล์โหลดแบบที่สองไม่ทำงานให้ฉัน

— Goose

Uncaught ReferenceError: map is not definedฉันได้รับ ฉันพยายามเรียกใช้สคริปต์ด้วยความล่าช้าและในตอนท้ายของสคริปต์อื่น ๆ ของฉัน แต่ดูเหมือนไม่มีอะไรทำงาน

— Sam Willis

1

หากคุณกำหนดตัวจัดการเหตุการณ์ภายในตัวจัดการเหตุการณ์คุณจะมีช่วงเวลาที่ไม่ดี ฉันขอแนะนำให้คุณอย่าทำอย่างนี้นี่เป็นทางเลือกที่แฮ็ก

— Cory Mawhorter

15

หากคุณกำลังใช้ Maps API v3 สิ่งนี้มีการเปลี่ยนแปลง

ในเวอร์ชัน 3 คุณต้องการตั้งค่าฟังสำหรับbounds_changedเหตุการณ์ซึ่งจะทริกเกอร์เมื่อโหลดแผนที่ เมื่อมีการทริกเกอร์ให้ลบ listener ออกตามที่คุณไม่ต้องการให้แจ้งทุกครั้งที่ขอบเขตการเปลี่ยนวิวพอร์ตเปลี่ยนไป

สิ่งนี้อาจเปลี่ยนแปลงได้ในอนาคตเมื่อ V3 API กำลังพัฒนา :-)

— timbo
แหล่งที่มา

2

ฉันไม่พบว่าการทำงานนี้สำหรับฉันอย่างน่าเชื่อถือเท่ากับการมองหาtilesloadedเหตุการณ์

— TMC

12

ในปี 2561:

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

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

— haffla
แหล่งที่มา

tilesloaded เป็นโซลูชันเดียวที่รออย่างถูกต้องจนกว่าชั้น KML จะแสดงผลทั้งหมด

— smirkingman

9

หากคุณกำลังใช้ส่วนประกอบของเว็บคุณจะได้รับสิ่งนี้เป็นตัวอย่าง:

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

— Phillip Senn
แหล่งที่มา

3

ความคิดเห็นแย่มากมันผิดในหลาย ๆ ระดับไม่รู้ว่าจะเริ่มจากตรงไหน

— คืน

1

ทำไมคุณถึงพูดว่า "ความคิดเห็นแย่มากมันผิดในหลาย ๆ ระดับที่ฉันไม่รู้ว่าจะเริ่มจากตรงไหน"?

— Phillip Senn

3

แต่ทำไมต้องมีวิธีแก้ปัญหาโดยใช้เฟรมเวิร์กที่แตกต่างจาก google maps

— คืน

เพราะมันอาจจะดีกว่า

— Phillip Senn

HAHAHAHA @nights

— Juan

5

GMap2::tilesloaded() จะเป็นเหตุการณ์ที่คุณกำลังมองหา

ดูGMap2.tilesloadedสำหรับการอ้างอิง

— Adam Markowitz
แหล่งที่มา

ฉันได้อ่านเรื่องราวเกี่ยวกับไทล์โหลดมาก () และดูเหมือนว่ามันไม่สอดคล้องกันอย่างมากเมื่อมันเริ่มทำงาน ตัวเลือกอื่น ๆ ?

3

โดยที่ตัวแปรmapเป็นออบเจ็กต์ประเภท GMap2:

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

— devlord
แหล่งที่มา

0

ในกรณีของฉัน Tile Image โหลดจาก URL ระยะไกลและ tilesloadedเหตุการณ์ถูกเรียกใช้ก่อนที่จะแสดงรูปภาพ

ฉันแก้ไขด้วยวิธีที่สกปรกดังต่อไปนี้

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

คุณสามารถตรวจสอบGMap2.isLoaded()วิธีการทุกnมิลลิวินาทีเพื่อดูว่าแผนที่และไทล์ทั้งหมดของมันถูกโหลด ( window.setTimeout()หรือwindow.setInterval()เป็นเพื่อนของคุณ)

แม้ว่าสิ่งนี้จะไม่ให้เหตุการณ์ที่แน่นอนของการโหลดเสร็จ แต่ก็ควรดีพอที่จะทำให้ Javascript ของคุณทำงานได้

— fbuchinger
แหล่งที่มา