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

Question

我的谷歌地图不会在我的 dcodes 选项卡 jquery 脚本的第一个选项卡(事件选项卡)中加载。我相信在事件选项卡 div 可见之前正在初始化 map 。有些人，作为解决方法，稍后在脚本中或实际单击并打开选项卡时初始化()。这对我不起作用，因为我在同一页面上加载了多个 map ，并且 php 循环在调用每个函数时将变量传递给 javascript。

如果我必须没有标签，我会的。但是，如果我可以将我的 map 放入一个选项卡中，它会使我的页面看起来更干净。

当我注释掉包含 hide() 的行时， map 会出现在选项卡中。

我正在使用 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>

这是我在网上找到的最接近的东西: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 中的 s .这些隐藏的<div> s 没有在代码库的任何其他部分中被隐藏
  • 修复:使用 #dc_tabs_type_4_content > div , 它只选择选项卡并排除 <div>选项卡内的 s
• 缺少 position: absolute 在style #dc_tabs_4_content 的属性.这允许父级完全包含内部的 map (或文本)
  • 修复:删除 height: auto并插入 position: absolute

Updated JSFiddle