Google지도 -지도가 보이지 않을 때 마커에 맞게 확대/축소가 작동하지 않습니다.

Question

Google Maps API v2를 사용하고 있습니다. 마커를지도에 추가 한 다음 해당 마커에 맞게 확대/축소합니다. 지도가 보이면 잘 작동합니다. 그러나 그렇지 않은 경우 - 예를 들어 탭 스트립이 있고 페이지가로드 될 때지도의 탭이 선택되지 않은 경우 -지도를 표시 할 때 줌 레벨과 중심이 잘못되었습니다.

다음은 간단한 테스트 케이스 (jQuery를 사용)의 :이 그대로 잘 작동

<script type="text/javascript"> 

    var scale = Math.random() * 20; 

    $(document).ready(function() { 
     var $container = $('#container'); 
     // $container.hide(); 
     var map = new GMap2($('#map')[0]); 
     $container.show(); 
     var markerBounds = new GLatLngBounds(); 
     for (var i = 0; i < 10; i++) { 
      var randomPoint = new GLatLng(38.935394 + (Math.random() - 0.5) * scale, -77.061382 + (Math.random() - 0.5) * scale); 
      map.addOverlay(new GMarker(randomPoint)); 
      markerBounds.extend(randomPoint); 
     } 
     map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds)); 
    }); 

</script> 

<div id="container"> 
    <div id="map" style="margin: 100px; width: 450px; height: 300px;"></div> 
</div> 

,하지만 당신은 $container.hide() 주석이 있다면 모두 밖으로 구타.

보이지 않는 div에서 Google Maps API를 제대로 작동시키는 방법이 있습니까?

Answer 1

당신이해야 할 일은 무엇보다도 먼저 GMaps2()을 생성하는 것입니다. 그런 다음 hide() 컨테이너를 사용하여 포인트를 추가하고 getBoundsZoomLevel(), show()을 다시 가져 오면 올바르게 작동합니다.

는 다음과 같은 시도 :

$(document).ready(function() { 
    var $container = $('#container'); 

    // First create the Map. 
    var map = new GMap2($('#map')[0]); 

    // The container can be hidden immediately afterwards. 
    $container.hide(); 

    // Now you can do whatever you like! 
    var markerBounds = new GLatLngBounds(); 
    for (var i = 0; i < 10; i++) { 
     var randomPoint = new GLatLng(38.935394 + (Math.random() - 0.5) * scale, 
            -77.061382 + (Math.random() - 0.5) * scale); 
     map.addOverlay(new GMarker(randomPoint)); 
     markerBounds.extend(randomPoint); 
    } 
    map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds)); 

    // Finally unhide the container. 
    $container.show(); 
}); 

Answer 2

여기 내가 가치가 무엇을, 일을 결국 한 내용입니다.

는

  $(".TabPanel").watch("display,visibility", function() { 
       $(".MapContainer", this).each(function() { 
        if ($(this).is(":visible") == true) { 
         $(this).zoomToFitMarkers(); 
        }; 
       }); 
      }); 

이 가시성이 변경에 대한 탭 패널을 볼 Rick Strahl's monitoring plugin for jQuery를 사용하고, 다음 줌 논리를 다시 적용합니다. 완성도를 들어

여기 내 zoomToFitMarkers 확장입니다 :

이 규칙의 몇 가지에 의존

$.fn.zoomToFitMarkers = function() { 
    var map = this[0]; 
    map.gmap.checkResize(); 
    map.bounds = new GLatLngBounds(); 
    if (!!map.gmap.getOverlays) { 
     for (i = 0; i < map.gmap.getOverlays.length; i++) { 
      map.bounds.extend(map.gmap.getOverlays[i].getLatLng()); 
     } 
     if (map.bounds && !map.bounds.isEmpty()) { 
      var zoomLevel = map.gmap.getBoundsZoomLevel(map.bounds); 
      zoomLevel = zoomLevel > 9 ? 9 : zoomLevel; 
      zoomLevel = zoomLevel < 2 ? 2 : zoomLevel; 
      map.gmap.setCenter(map.bounds.getCenter(), zoomLevel); 
     } 
    } 
    map.gmap.checkResize(); 
}; 

:

GMap2의 객체가 대상 DOM 요소입니다 map map.gmap에 저장됩니다

1. :

   var map= $("div#MapTarget")[0]; 
   map.gmap = new google.maps.Map2(map); 
   

2. 마커가지도에 추가 될 때마다, 그것은 나중에 사용하기 위해 배열에 저장된 :

   이

   var marker = new GMarker(point); 
   map.gmap.addOverlay(marker); 
   // Keep track of new marker in getOverlays array 
   if (!map.gmap.getOverlays) map.gmap.getOverlays = new Array(); 
   map.gmap.getOverlays.push(marker);