Programing

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

lottogame 2020. 3. 20. 08:10
반응형

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


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

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

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


이것은 GMaps v3에서 잠시 동안 귀찮게했습니다.

나는 이것을 이렇게 할 수있는 방법을 찾았다.

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

"유휴"이벤트는지도가 유휴 상태가되면로드 된 모든 항목 (또는로드하지 못한 상태)으로 트리거됩니다. 나는 tilesloaded / bounds_changed보다 더 신뢰할 만하다는 것을 알았고 addListenerOnce메서드를 사용 하여 클로저의 코드가 처음으로 "유휴"가 시작되고 이벤트가 분리 될 때 실행됩니다.

Google지도 참조 이벤트 섹션 도 참조하십시오 .


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

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

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

V3 API가 발전함에 따라 향후에 변경 될 수 있습니다 :-)


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

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

2018 년 :

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

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


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

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


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

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

필자의 경우 원격 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
});

당신은 확인 할 수 GMap2.isLoaded()있는 모든 방법을 n지도와 모든 타일로드 (있다면 밀리 초는 볼 수 window.setTimeout()또는 window.setInterval()당신의 친구를).

이것이로드 완료의 정확한 이벤트를 제공하지는 않지만 Javascript를 트리거하기에 충분해야합니다.

참고 URL : https://stackoverflow.com/questions/832692/how-can-i-check-whether-google-maps-is-fully-loaded

반응형