Google지도가 완전히로드되었는지 어떻게 확인할 수 있습니까?


293

웹 사이트에 Google지도를 삽입하고 있습니다. Google지도가로드되면 몇 가지 JavaScript 프로세스를 시작해야합니다.

타일 ​​다운로드 및 모두를 포함하여 Google지도가 완전히로드 된 시점을 자동 감지하는 방법이 있습니까?

tilesloaded()방법은 바로이 작업을 수행하기로되어 있지만되어있는 이 일을하지 않습니다 .


2
"tilesloaded"이벤트는 저에게 효과적입니다. 페이지가로드되고지도를 움직일 때 발생합니다. 지도에서 일관성이 없거나 작동하지 않습니까?
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지도 참조 의 이벤트 섹션 도 참조하십시오 .


15
맵이 유휴 상태가되면 더 이상로드되지 않습니다. 연결 상태가 좋지 않아로드되지 않은 타일이있을 수 있으므로 누락 된 부분이 있어도 결국 유휴 이벤트가 발생합니다. 맵이 완전하고 누락 된 타일이 없는지 확인해야하는 경우 다른 방법 (예 : "tilesloaded"이벤트)을 찾아야합니다.
ddinchev

15
그것은 나를 위해 작동하지 않습니다 .. 내지도에 표시되기 전에 트리거
zsitro

16
-1 : 타일을로드 / 표시하는 것보다 빨리 트리거합니다.
zbr December

11
-1 : 크롬과 파이어 폭스에서 스크립트가로드 된 후 타일이 표시되기 전에 지속적으로 실행됩니다. 어쩌면 빠른 연결에서는 분명하지 않지만 매우 느린 연결로 축복을 받았습니다. '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
    });
});

4
첫 번째 tileloaded 함수는 나에게 잘 작동하지만 두 번째 tileloaded 함수는 나에게 절대 실행되지 않습니다.
Goose

을 받고 Uncaught ReferenceError: map is not defined있습니다. 지연 시간이 있고 다른 스크립트가 끝나면 스크립트를 실행하려고했지만 아무것도 작동하지 않는 것 같습니다.
샘 윌리스

1
이벤트 핸들러 내에서 이벤트 핸들러를 정의하는 경우 시간이 나쁠 것입니다. 나는 당신이 이것을하지 말 것을 강력히 권합니다
Cory Mawhorter

15

Maps API v3을 사용중인 경우 변경되었습니다.

버전 3에서는 기본적으로 bounds_changed이벤트로드를 설정하여 맵로드시 트리거됩니다. 일단 트리거되면 뷰포트 경계가 바뀔 때마다 알리지 않기 위해 리스너를 제거하십시오.

V3 API가 발전함에 따라 앞으로 변경 될 수 있습니다. :-)


2
tilesloaded이벤트 를 찾는 것만 큼 안정적으로 작동하지 않습니다 .
TMC


9

웹 구성 요소를 사용하는 경우 다음과 같은 예가 있습니다.

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

3
끔찍한 의견, 너무 많은 수준의 잘못은 어디서부터 시작 해야할지 모릅니다.

1
왜 "끔찍한 의견, 어디에서 시작할지 모르는 많은 수준에서 잘못되었습니다"라고 말합니까?
Phillip Senn

3
그러나 왜 구글 맵과 다른 프레임 워크를 사용하여 솔루션을 제공해야합니까?

아마 더 낫기 때문에?
Phillip Senn

HAHAHAHA @nights
Juan

5

GMap2::tilesloaded() 당신이 찾고있는 이벤트가 될 것입니다.

참조는 GMap2.tilesloaded 를 참조하십시오.


tilesloaded () 이벤트에 대해 많이 읽었으며 그것이 실행될 때 매우 일관되지 않은 것 같습니다. 다른 옵션이 있습니까?

3

변수 map가 GMap2 유형의 객체 인 경우 :

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

0

필자의 경우 원격 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를 트리거하기에 충분해야합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.