program story

Google Maps Api v3-getBounds가 정의되지 않았습니다.

inputbox 2020. 10. 7. 07:38
반응형

Google Maps Api v3-getBounds가 정의되지 않았습니다.


v2에서 v3 Google지도 API로 전환 중이며 gMap.getBounds()기능에 문제가 있습니다.

초기화 후지도의 경계를 가져와야합니다.

내 자바 스크립트 코드는 다음과 같습니다.


var gMap;
$(document).ready(

    function() {

        var latlng = new google.maps.LatLng(55.755327, 37.622166);
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);

        alert(gMap.getBounds());
    }
);

이제 gMap.getBounds()정의되지 않은 것을 알려 줍니다.

클릭 이벤트에서 getBounds 값을 얻으려고 시도했지만 잘 작동하지만로드 맵 이벤트에서 동일한 결과를 얻을 수 없습니다.

또한 getBounds는 Google Maps API v2에서 문서를로드하는 동안 제대로 작동하지만 V3에서는 실패합니다.

이 문제를 해결하도록 도와 주시겠습니까?


v3 API의 초기에는이 getBounds()메소드가 올바른 결과를 반환하기 위해지도 타일의로드를 완료해야했습니다. 그러나 이제는 bounds_changed이벤트 이전에도 발생하는 이벤트를 수신 할 수있는 것 같습니다 tilesloaded.

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps v3 - getBounds is undefined</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px;"></div> 

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: new google.maps.LatLng(55.755327, 37.622166),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      google.maps.event.addListener(map, 'bounds_changed', function() {
         alert(map.getBounds());
      });
   </script> 
</body> 
</html>

It should be working, atleast according to the documentation for getBounds(). Nevertheless:

var gMap;
$(document).ready(function() {
    var latlng = new google.maps.LatLng(55.755327, 37.622166);
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);
    google.maps.event.addListenerOnce(gMap, 'idle', function(){
        alert(this.getBounds());
    });
});

See it working here.


I was saying Salman's solution is better because the idle event is called earlier than the tilesloaded one, since it waits for all the tiles to be loaded. But on a closer look, it seems bounds_changed is called even earlier and it also makes more sense, since you're looking for the bounds, right? :)

So my solution would be:

google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
    alert(this.getBounds());
});

In other comments here, it's adviced to use the "bounds_changed" event over "idle", which I agree with. Certainly under IE8 which triggers "idle" before "bounds_changed" on my dev machine at least, leaving me with a reference to null on getBounds.

The "bounds_changed" event however, will be triggered continuously when you'll drag the map. Therefor, if you want to use this event to start loading markers, it will be heavy on your webserver.

My multi browser solution to this problem:

google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
   loadMyMarkers();
   google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});

Well, i'm not sure if i'm too late, but here's my solution using gmaps.js plugin:

map = new GMaps({...});

// bounds loaded? if not try again after 0.5 sec
var check_bounds = function(){

        var ok = true;

        if (map.getBounds() === undefined)
            ok = false;

        if (! ok) 
            setTimeout(check_bounds, 500);
        else {
             //ok to query bounds here
              var bounds = map.getBounds();
        }   
    }

    //call it
    check_bounds();

참고URL : https://stackoverflow.com/questions/2832636/google-maps-api-v3-getbounds-is-undefined

반응형