Google Maps API v3 + jQuery UI 탭의 문제
Google Maps API를 사용하여 jQuery UI 탭 내에서 잘 작동하는 여러 문제가 있습니다. 어떤 문제 ( 예 : 여기 및 여기 )에 대한 질문이 게시 된 것을 의미지만 솔루션은 Maps API v2에서만 작동하는 것입니다. 내가 확인한 다른 참조는 여기 와 여기 에 인터넷 검색을 통해 확인할 수있는 거의 모든 내용이 있습니다.
혼합 된 결과가있는 jQuery 탭에 맵 ( API v3 사용)을 채우려 고했습니다 . 모든 최신 버전을 사용하고 있습니다 (현재 jQuery 1.3.2, jQuery UI 1.7.2,지도에 대해 알지 못함).
다음은 마크 업 및 자바 펼쳐입니다.
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>
과
$(document).ready(function() {
var map = null;
$('#dashtabs').tabs();
$('#dashtabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == 'map_tab' && !map)
{
map = initializeMap();
google.maps.event.trigger(map, 'resize');
}
});
});
function initializeMap() {
// Just some canned map for now
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map($('#map_canvas')[0], myOptions);
}
다음은 작동하거나 작동하지 않습니다. ( Maps API v3의 경우 ).
- jQuery UI 탭 문서 (및 내가 연결 한 두 가지 질문에 대한 답변)에 설명 된 요청에서 벗어난 기술을 사용하는 것은 전혀 작동하지 않습니다. 실제로 가장 잘 작동하는 코드는 CSS를
.ui-tabs .ui-tabs-hide { display: none; }대신 사용합니다 . - 탭에지도를 표시하는 유일한 방법은 CSS 너비와 높이를
#map_canvas절대 값으로 설정하는 것입니다. 와 높이를 너비auto또는로 변경하면100%지도가 이미 성공적으로 렌더링 되었더라도 (절대 너비 및 높이 사용)지도가 전혀 표시되지 않습니다. - Maps API 외부에서 문서화 된 것을 사용할 수 없습니다
map.checkResize(). 대신을 호출하여 크기 조정 이벤트를 발생합니다google.maps.event.trigger(map, 'resize'). tabsshow이벤트에 바인딩 된 함수 내에서지도가 초기화되지 않은 경우 지도 자체는 언어입니다. 대부분은 일반 누락입니다.
그래서 여기 내 질문이 있습니다.
- 다른 사람이 같은 업적을 달성 한 경험이 있습니까? 문서화 된 트릭이 Maps API v3에서 작동하지 않기 때문에 작동하는 것이 무엇인지 확인하는 것이 무엇입니까?
- jQuery UI 문서에 따라 Ajax를 사용하여 탭 콘텐츠를로드하는 것은 무엇입니까? 나는 그것을 가지고 놀 기회가 없었지만 내 추측은 그것이지도를 훨씬 더 깨뜨릴 생각합니다. 작동하도록 할 수있는 기회는 무엇입니까 (또는 시도 할 가치가없는 것)?
- 지도가 가능한 가장 큰 영역을 채우도록 지불해야합니까? 탭을 채우고 maps.google.com에서하는 것처럼 페이지 크기 조정에 맞게 조정하고 싶습니다. 그러나 내가 말했듯이 절대 너비와 높이 CSS 만지도 div에 적용하는 데 고착 된 것처럼 보입니다.
이것이 장황한 경우 죄송하지만 Maps API v3 + jQuery 탭에 대한 유일한 문서 일 수 있습니다. 건배!
참고 :이 내용은 기본적으로 콘텐츠를 대체하는 유효하지 않은 제 3 자 편집을 참조합니다. 이것은 제 3 자 편집자가하지 말아야 할 일입니다. 그러나 결과가 원본보다 더 유용 할 수 있으므로 두 버전이 모두 아래에 제공됩니다.
Anon이 편집 한 2010 년 원저자 Anon의 버전
google.maps.event.trigger (지도, '크기 조정'); map.setZoom (map.getZoom ());
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 에서 v2의 checkResize ()를 v3 대체로 제안했습니다 .
Blech- 나쁜 Google, 쿠키 없음.
- 사용자 Eugeniusz Fizdejko의 완전한 재 작성 양식 2012 :
나를 위해 마커를 추가 할 때 작동합니다.
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
google.maps.event.addListener(map, "idle", function(){
marker.setMap(map);
});
실제로 위의 대답을 긁어냅니다. jQueryUI 웹 사이트에 답이 있으므로 여기에 있습니다.
왜 ...
... 내 것, Google지도, sIFR 등이 숨겨진 (비활성) 탭에 배치 될 작동하지 않을 것입니까?
탭 패널 자체가 제공을 통해 숨겨져 있기 때문에 초기화를 위해 계산이 필요한 구성 요소는 숨겨진 탭에서 작동하지 않습니다. 내부 요소가 실제 너비와 높이를보고하지 않아도됩니다. (대부분의 브라우저에서 0).
쉬운 해결 방법이 있습니다. 비활성 탭 패널을 숨기려면 왼쪽에서 벗어난 기술을 사용하십시오. 예를 들어 스타일 시트에서 클래스 선택기 ".ui-tabs .ui-tabs-hide"에 대한 규칙을
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
Google지도의 경우 다음과 같이 표시 될지도 탭 크기를 수도 있습니다.
$('#example').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap ()은 특정지도에서 Google지도의 checkResize ()를 호출합니다.
숨겨진 탭에 대한 CSS 클래스를 재정의하십시오.
.ui-tabs .ui-tabs-hide {
position: absolute !important;
left: -10000px !important;
display:block !important;
}
Google지도 v3에서 수행 할 수있는 작업은 다음과 가변합니다.
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(point); // be sure to reset the map center as well
});
탭이 많이 후지도를로드합니다.
이 해키이지만 나를 위해 일했습니다. 다음과 같이 iframes rel 속성 안에지도 iframe의 URL을 저장하기 만하면됩니다.
<iframe width="490" height="300" rel="http://maps.google.com/maps?f=q&source=s..."></iframe>
이 이벤트는 iframe src 속성을 rel 내부의 URL로 설정합니다.
$("#tabs").tabs({
show:function(event, ui) {
var rel = $(ui.panel).find('iframe').attr('rel');
$(ui.panel).find('iframe').attr('src',rel);
}
});
모든 질문에 대한 답은 어떤 문제가 해결 방법 다른 모든 답변에는 한 가지가 누락되었습니다. "크기 조정"이벤트로지도를 다시 그리면지도의 중심 위치를 잃게됩니다. 따라서 지도가 위치의 중심에있는 경우 setCenter 를 사용하여지도의 중심을 다시 업데이트해야합니다 .
또한 탭 변경이 트리거 될 때마다지도를 초기화하고 싶지는 않습니다. 이는 거의이지 않고 추가 지오 코드가 있기 때문입니다. 먼저, 정적 위도 / 경도 일 수있는 중앙 위치를 저장해야합니다. 또는 지오 코딩의 경우 다음과 같을 수 있습니다.
var address = "21 Jump St, New York, NY";
var geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var center;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
center = results[0].geometry.location;
map.setCenter(center);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
그때
$("#tabs").tabs();
$('#tabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "mapTab") {
google.maps.event.trigger(map, "resize");
map.setCenter(center); // Important to add this!
}
});
여기서 'mapTab'은 mapTab의 ID이고 'map'은지도 클래스의 var 이름입니다.
탭을 초기화하는 스 니펫 전에지도를 초기화하는 코드가 호출되었는지 확인하세요.
내가 가진 유일한 성가심은 맵 탭을 클릭하면 브라우저가 맵에 점점 늘어나고 맞추도록 점프하고 jQuery가 기본 탭 컨테이너 주변에 배치하는 기본 옵션을 벗어났다는 것입니다. 첫 번째 및 간단한 border-size : 0을 처리하기 위해 맵 탭의 a 태그에 false onclick 호출을 반환하여 기본 탭 div에서 두 번째를 처리합니다.
이 모든 것이 나를 위해 일했습니다.
행운을 빕니다!
나는 이것에 대한 답을 찾기 위해 모든 포럼을 통과했습니다 ...
map.checkResize()
.... 아무것도 작동하지 않는 것 같았습니다 ... 그런 다음 탭이 표시 될 때 탭을 초기화하지 않는 이유는 무엇입니까?
$("#servicesSlider ").tabs({
//event: 'mouseover'
fx: { height: 'toggle', opacity: 'toggle'},
show: function(event, ui) {
if (ui.panel.id == "service5") {
$(ui.panel).css("height","100%")
initialize()
}}
});
"service5"는 내 Google지도 v3를 보유하고있는 내 탭의 ID입니다.
이것이 당신을 위해 작동하기를 바랍니다!
이 코드는 오류를 수정하지만 IE에서는 작동하지 않습니다. 검색하고 검색 한 후 다음 줄을 추가해야하며 모든 것이 완벽하게 작동한다는 것을 발견했습니다.
< !--[if IE]>
< style type="text/css">
.ui-tabs .ui-tabs-hide { position: relative; }
< /style>
< ![endif]-->
AJAX를 통해지도를로드하고 있습니다.
백분율 문제는 설정가없는 패널 (로드 된 마크 업이 포함 된 패널)과 관련이있는 것입니다.
탭을 만들 때 다음 코드를 사용하면 많은 도움이되었습니다.
$("#mainTabs").tabs({'show': function(event, ui){
$(ui.panel).attr('style', 'width:100%;height:100%;');
return true;
}});
전화해도됩니다
map.fitBounds (경계)
그것은 새로 고침을 할 것입니다
매우 짜증나는 문제이지만 약간의 해킹으로 수 있습니다. 핵심은 새 탭을 선택할 때 각 탭의 높이에 맞게 #tabs의 위치를 조정하는 것입니다. 내가 한 방법은 다음과 가변적이다.
$('#tabs').tabs({
selected:0,
'select': function(event, ui) {
//this is the href of the tab you're selecting
var currentTab = $(ui.tab).attr('href');
//this is the height of the related tab plus a figure on the end to account for padding...
var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40;
//now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID
$('#tabs').css('height', currentInner);
}
});
내가 다루는 CSS는 다음과 가변합니다.
#tabs { position: relative; }
/*set the width here to whatever your column width is*/
.ui-tabs-panel{ position:absolute;top:0px; left:0; width:575px;}
.ui-tabs-panel.ui-tabs-hide { display:block !important; position:absolute; left:-99999em; top:-9999em}
API 를 사용하여 적으로로드 한 다음 이벤트 의 관련 탭에 설명 태그 loadScript에서 다음과 같이 호출 하여 쉽게 작동 할 수 있습니다 .<a>onclick
<li><a href="#tab3" onclick="loadScript();">Maps</a></li>
나는 같은 문제가 있었고 어떤 대답도 나를 위해 일하지 않았습니다. 아마도 코드에서 사용하는 방법을 몰랐기 때문에 탭 메뉴에 onclick 이벤트를 추가하여 Google지도를 초기화하고 작동 중입니다. 그래도 좋은 습관인지 모르겠습니다.
jQuery(document).ready(function($) {
$( '#tabs' ).tabs();
var href = $('#tabs').find('a[href="#tabs-4"]');
(href).on('click',function(){
initialize();
})});
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
<div id="tabs-4">
<div id="map" style="width:580px;height:380px;">
</div>
</div>
Maps API v3 (exp) 및 jQuery UI 1.10을위한 또 다른 솔루션 :
var pano = new google.maps.StreetViewPanorama(...);
$('#tabs').tabs({
'activate': function(event, ui) {
if (ui.newPanel[0].id == "maps-tabs-id") {
pano.setVisible(true);
}
}
});
Keith가 말한 것을 수행했으며 제 경우에는 탭 탐색에 jQuery 웨이 포인트를 사용하고 있습니다. 여기에 사용한 코드가 있습니다.
머릿속에서
<head>
<!-- Google Maps -->
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
내 탭 내부 :
<li><a href="#MyMap" onclick="loadScript();">My Map</a></li>
그런 다음 DIV에서
<div id="map_canvas"></div>
이것이 누군가에게 도움이되기를 바랍니다, 모두에게 감사드립니다!
에서 같은 문제에 직면하고 Semantic UI있었는데 init();, 탭이로드 될 때 함수 를 호출하는 동안 문제가 해결 되었거나 바인딩 할 수도 있습니다.
참고 URL : https://stackoverflow.com/questions/1428178/problems-with-google-maps-api-v3-jquery-ui-tabs
'ProgramingTip' 카테고리의 다른 글
| jquery ajax 호출 -.fail 대. : 오류 (0) | 2020.11.02 |
|---|---|
| 간단한 CLI Java linter가 있습니까? (0) | 2020.11.02 |
| JavaScript를 사용하여 웹 소켓을 인터페이스 비디오 스트리밍 (0) | 2020.11.02 |
| 가져 오기 오기를위한 예비 패키징 (0) | 2020.11.02 |
| 이것은 JVM 버그입니까 아니면 "예상 된 동작"입니까? (0) | 2020.11.02 |