[javascript] Google Maps API v3-getBounds가 정의되지 않았습니다.

Program / 글쓴이

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>

답변

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);
    google.maps.event.addListenerOnce(gMap, 'idle', function(){
        alert(this.getBounds());
    });
});

여기에서 작동하는 것을 보십시오 .

답변

모든 타일이로드 될 때까지 기다리기 때문에 idle이벤트가 이벤트보다 일찍 호출 되기 때문에 Salman의 솔루션이 더 낫다고 말하고있었습니다 tilesloaded. 하지만 자세히 살펴보면 bounds_changed더 일찍 호출 된 것 같고 경계를 찾고 있기 때문에 더 의미가 있습니다. 🙂

그래서 내 해결책은 다음과 같습니다.

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

답변

여기에있는 다른 의견에서는 “idle”보다 “bounds_changed”이벤트를 사용하는 것이 좋습니다. 이에 동의합니다. 확실히 IE8에서는 적어도 내 dev 컴퓨터에서 “bounds_changed”전에 “유휴”를 트리거하여 getBounds에서 null에 대한 참조를 남깁니다.

그러나 “bounds_changed”이벤트는지도를 드래그 할 때 계속 트리거됩니다. 따라서이 이벤트를 사용하여 마커로드를 시작하려면 웹 서버에서 무겁습니다.

이 문제에 대한 내 멀티 브라우저 솔루션 :

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

답변

글쎄, 내가 너무 늦었는지 확실하지 않지만 다음은 gmaps.js 플러그인을 사용하는 내 솔루션입니다 .

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

답변