3
我的谷歌地圖不會加載到我的dcodes選項卡jquery腳本的第一個選項卡（活動選項卡）內。我相信在活動標籤div可見之前，地圖正在初始化。有些人作爲解決方案，在腳本中稍後初始化（），或者實際單擊並打開選項卡時。這對我不起作用，因爲我在同一頁面上加載了多個地圖，並且在每個函數被調用時，一個php循環將變量傳遞給javascript。如何讓我的谷歌地圖加載在jquery選項卡中？
如果我必須沒有標籤，我會的。但是，如果我可以將我的地圖放到一個標籤中，它將使我的頁面看起來更清晰。
當我註釋掉隱藏的行（）時，地圖確實出現在標籤中。
我使用谷歌地圖API V3
歌劇標籤（方式4）http://www.dcodes.net/2/docs/tabs.html
這裏是鏈接到我掏出查看頁面源的js fiddle code。
我曾嘗試將display_kmlmap（）函數存儲到一個php變量中，然後將它打印在javascript標籤後，以查看是否有所作爲，但沒有。
這裏是我的代碼：
<script type="text/javascript">
function display_kmlmap(kmlmapid, kmlurllink)
{
var kmlmap = kmlmapid;
var kmlUrl = 'http://www.example.com/test/'+ kmlurllink;
//document.write(kmlmap);
//document.write(kmlUrl);
var map_options = { };
var map = new google.maps.Map(document.getElementById(kmlmap),map_options);
// var kmlUrl = 'http://www.example.com/test/PW-Files/19/kml/161091.kml';
var kmlOptions = { mapTypeId: google.maps.MapTypeId.SATELLITE,map: map
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
}
</script>
<!-- Note: I have these files on my local drive, but have listed the hosted files on here so you can access them. -->
<!-- DC Tabs CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/tabs/css/dc_tabs.css" />
<!-- jQuery Library (skip this step if already called on page) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Tabs JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/tabs/js/dc_tabs.js"></script>
<!-- DC Opera Tabs Start -->
<div class="dc_tabs_type_4_container" style="width:90%; height:auto;">
<ul id="dc_tabs_type_4">
<!-- Tab Captions -->
<li><a href="#" title="red-tab1">Aerial View</a></li>
<li><a href="#" title="red-tab2">Listing Details</a></li>
<li><a href="#" title="red-tab3">Videos</a></li>
<li><a href="#" title="red-tab4">Printable Docs</a></li>
</ul>
<div id="dc_tabs_type_4_content" style="height:auto;"> <!-- Tab Content Container -->
<!-- Tab 1 Start -->
<div id="red-tab1">
<?php
$dirname = "PW-Files/$listingid/kml/";
$kmls = glob($dirname."*");
$html = "";
//Display kmls using foreach loop
foreach($kmls as $kml){
// display_kmlmap()
$info = pathinfo($kml);
$file_name = basename($kml,'.'.$info['extension']);
//print $kml;
$html .= "<div id=\"$file_name\" style=\"width:500px; height:300px; float:left\"></div>";
?>
<script type="text/javascript">
$(document).ready(function() {
if ($('#<?php echo"$file_name";?>').length != 0) {
display_kmlmap(<?php echo json_encode($file_name);?>, <?php echo json_encode($kml);?>);
}
});
</script>
<?php
}
echo "$html";
?>
<p>Where is the map?</p>
</div>
<!-- Tab 1 End -->
<!-- Tab 2 Start -->
<div id="red-tab2">
<h2>Tab Two</h2>
<p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>
<p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>
</div>
<!-- Tab 2 End -->
<!-- Tab 3 Start -->
<div id="red-tab3">
<h2>Tab Three</h2>
<p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
<h3>Duis pulvinar nibh vel urna</h3>
<p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet. </p>
<p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. </p>
</div>
<!-- Tab 3 End -->
<!-- Tab 4 Start -->
<div id="red-tab4">
<h2>Tab Four</h2>
<p>Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.</p>
<p>Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.</p>
</div>
<!-- Tab 4 End -->
</div> <!-- /dc_tabs_type_4_content -->
<!-- DC Opera Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->
<!-- DC Opera Tabs Settings -->
</div>
<script type="text/javascript">
/* Tabs 4 */
$(document).ready(function() {
$("#dc_tabs_type_4_content div").hide(); // Initially hide all dc_tabs_type_4_content
$("#dc_tabs_type_4 li:first").attr("id","current"); // Activate first tab
$("#dc_tabs_type_4_content div:first").fadeIn(); // Show first tab dc_tabs_type_4_content
$('#dc_tabs_type_4 a').click(function(e) {
e.preventDefault();
$("#dc_tabs_type_4_content div").hide(); //Hide all dc_tabs_type_4_content
$("#dc_tabs_type_4 li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('title')).fadeIn(); // Show dc_tabs_type_4_content for current tab
});
})();
</script>
這是我在網上找到的最接近的事：Google Maps and jQuery Tabs的大教堂。他將hide（）更改爲css.visibility。但是，他的代碼與我的代碼有點不同，所以我不確定我應該怎樣做，因爲我的JavaScript和css不夠先進，但我想學習。
這裏是大教堂的代碼，他聲稱爲他工作：
$(document).ready(function() {
//Default Action
$(".tab_content").css({'visibility':'hidden' , 'position':'absolute'});
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").css({'visibility':'visible' , 'position':'static'});
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").css({'visibility':'hidden' , 'position':'absolute'});
var activeTab = $(this).find("a").attr("href");
$(activeTab).css({'visibility':'visible' , 'position':'static'});
return false;
});
});
下面是用jQuery選項卡的小提琴和第一個標籤上的地圖。它與你想要做的不同嗎？http：//jsfiddle.net/mapW2/1/ – TimSPQR
我需要弄清楚如何操作我的代碼，所以在像其他人一樣加載標籤後，我不必初始化。我認爲。我想要做一些與我的問題一起引用Dom的代碼。 –
您的HTML，CSS，JS顯示地圖在哪裏？小提琴會非常有幫助。 – TimSPQR