Question

我的Google地图不会加载到我的dcodes标签jquery脚本的第一个标签页（活动标签页）中。我相信在活动tab div可见之前，地图正在被初始化。有些人，作为一种解决方法，稍后在脚本中初始化（）或实际点击并打开选项卡。这对我不起作用，因为我在同一页面上加载了多个地图，并且在调用每个函数时，php循环将变量传递给javascript。

如果我必须没有标签，我会的。但是，如果我可以将地图放入标签页面，它将使我的页面看起来更清晰。

当我注释掉有hide（）的行时，地图会出现在标签中。

我使用的是Google Maps API v3

Opera选项卡（样式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>

这是我在网上找到的最接近的东西：Dom Google Maps and jQuery Tabs。他将hide（）改为css.visibility。但是，他的代码与我的有点不同，所以我不确定我应该做些什么，因为我对javascript和css不够先进，但我想学习。

这是Dom声称为他工作的代码：

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

    });

Answer 1

我在您的代码中发现了一些问题：

缺少</div>结束标记会导致标签1成为标签2-4的父级
- 修复：添加2个结束标记以终止标签1和#dc_tabs_type_4_container
广泛的jQuery选择器，例如#dc_tabs_type_4_content div隐藏了 <div>中的所有 #dc_tabs_type_4_content。这些隐藏的<div>在代码库的任何其他部分都没有被隐藏
- 修复：使用#dc_tabs_type_4_content > div，仅选择标签并排除标签中的<div>
在position: absolute style属性中遗漏#dc_tabs_4_content 。这允许父级完全包含内部的地图（或文本）
- 修复：删除height: auto并插入position: absolute

Updated JSFiddle

Answer 2

<script>
 jQuery("#home").click(function () {
 jQuery(".test").addClass("highlight");
 jQuery(".test1").removeClass("highlight");
 jQuery(".test2").removeClass("highlight");
 jQuery('#submit').removeAttr('disabled');;
 });
 jQuery("#moving").click(function () {
 jQuery(".test2").addClass("highlight");
 jQuery(".test").removeClass("highlight");
 jQuery(".test1").removeClass("highlight");
 jQuery('#submit').removeAttr('disabled');;
 });
 jQuery("#carpet").click(function () {
 jQuery(".test1").addClass("highlight");
 jQuery(".test").removeClass("highlight");
 jQuery(".test2").removeClass("highlight");
 jQuery('#submit').removeAttr('disabled');;
 });
 </script>

如何在jquery选项卡中加载我的谷歌地图？

2 个答案: