Google지도 + jQuery : 렌더링 버그

Google지도를 jquery-ui 탭에 배치하면 특정 상황에서지도가 제대로 표시되지 않습니다. 재현하려면 :Google지도 + jQuery : 렌더링 버그

이동하는 here
크기 조정 브라우저 창을 '목록'링크
을 클릭
관찰 (가)

을 '지도'링크를 클릭하면 그 장소의 이름 오버레이의 일부 제대로 그린다. 그러나 다른 사람들은 그렇지 않다. 문제의 범위를 제한하기 위해 실제로 모든 jquery-ui 항목을 제거했습니다. 문제의 원인이되는 숨기기/표시 : 블록은 표시 응용 프로그램처럼 보입니다.

UPDATE 버그도 발생

가끔 표시간에 토글 막 : 없음/블록 - 예를 들어 크기 조정이 발생하지 않습니다. 이것은 IE (8)에서 가장 일반적인 것 같습니다.

map_initialize();

는 페이지 크기가 조절되는지도 알려해야하기 때문에이, 어쩌면 당신이 JQuery와 하나

을하지 데 문제가 있어요

if (window.attachEvent) { 
    window.attachEvent("onresize", function() {this.map.onResize()}); 
    } else { 
    window.addEventListener("resize", function() {this.map.onResize()} , false); 
    }

후 :

출처

2009-07-19 Bobby Jack

Google지도 API v2 또는 v3 용인가요? 나는 v3와 함께 작업 해왔고 비슷한 문제를 겪어 왔지만 아직 100 % 해결할 수는 없습니다. –

나는 그 문제를 풀어 보자. http://stackoverflow.com/a/13380866/1823525 –

이 시도 편집

ok,

if (window.attachEvent) { 
      window.attachEvent("onresize", function() {map.onResize()}); 
     } else { 
      window.addEventListener("resize", function() {map.onResize()} , false); 
     }

을 제거하고이

$('#map').show();

로 교체 :

$("#map").show(1, function() { 
      resizeMap(); 
     });

resizeMap()를 특정지도에 구글지도 ' checkResize()를 호출합니다.

소스 : 당신이지도 각 시간을 표시 한 후 map.onResize()를 호출 http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

출처

2009-07-19 17:07:53

이론적으로는 좋지만 실제 연습에서는 작동하지 않는다. ((예제 업데이트) –

업데이트 된 예제 don ' 나를 위해 더 이상 문제가 없습니다. Firefox를 사용하고 있습니다. 3.5 무엇을 사용하고 있습니까? –

Firefox 3.5.1 몇 가지 다른 브라우저에서 사용해 보겠습니다. 캐싱 문제가 있는지 궁금합니다. 건배 –

보십시오.

height : 너비가 0이므로 display : none을 사용하여지도가 숨겨져있을 때 호출하면 정상적으로 작동하지 않을 수 있습니다. online docs에서

출처

2009-07-19 19:21:02

옙에 정의되어 있습니다. 디스플레이 : 아무 문제가 없습니다. –

는 비활성 탭 패널을 숨기는 오프 왼쪽 기술을 사용합니다. 예 : 스타일 시트에서 클래스 선택기 ".ui-tabs"규칙을 바꿉니다.. UI - 탭 숨기기 "
.ui-tabs .ui-tabs-hide { 
    position: absolute; 
    left: -10000px; 
} 

출처

2009-07-19 21:16:42

jQuery를 UI 탭과 같은 문제가 발생하고있는 jQuery Google Maps plugin를 사용하여

지도는 다음과 같이 생성된다 : 그것은

$("#google-map").googlemap({ 
    controls: false, 
    labels: true, 
    zoom: 9, 
    latitude: 51.5, 
    longitude: 0, 
    debug: false 
});

했다 전화로 매우 쉽게 해결할 수 있지만 (신속하지는 않음)

$("#google-map").googlemap().getMap().checkResize();

지도 후 div가 표시됩니다. 나는 FF와 사파리에서 이것을 더 테스트했다.

resizeTo(screen.width, screen.height);

IE에서는 작동하지만 IE 나 Safari에서는 작동하지 않는다.

출처

2009-08-19 11:58:14 rjstelling

Google지도 + jQuery : 렌더링 버그

답변

관련 문제