我怎样才能让我的谷歌地图加载在jquery选项卡中？

本文介绍了我怎样才能让我的谷歌地图加载在jquery选项卡中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我的google地图不会在我的dcodes标签jquery脚本的第一个标签（活动标签）中加载。我相信在活动标签div可见之前，地图正在初始化。有些人作为解决方案，在脚本中稍后初始化（），或者实际单击并打开选项卡时。这对我不起作用，因为我在同一页面上加载了多个地图，并且在每个函数被调用时，一个php循环将变量传递给javascript。如果我有没有选项卡，我会的。但是，如果我可以将我的地图放到一个标签中，它会让我的页面看起来更干净。当我将hide（）的行注释掉时， / b> 我正在使用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> 函数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> < link type =text / css =stylesheethref =http://cdn.dcodes.net/2/tabs/css/dc_tabs.css/> <！ - jQuery Library（如果已在页面上调用，则跳过此步骤） - > < script type =text / javascriptsrc =http://cdn.dcodes.net/2/jquery.min.js>< / script> <！ - （不要拨打两次） - > < script type =text / javascriptsrc =http://cdn.dcodes.net/2/tabs/js/dc_tabs.js>< / script> < div class =dc_tabs_type_4_containerstyle =width：90％; height：auto;> < ul id =dc_tabs_type_4> <！ - 标签标题 - > < li>< a href =＃title =red-tab1>鸟瞰图< / a>< / li> < li>< a href =＃title =red-tab2>清单详情< / a>< / li> < li>< a href =＃title =red-tab3>视频< / a>< / li> < li>< a href =＃title =red-tab4>可打印文档< / a>< / li> < / ul> < div id =dc_tabs_type_4_contentstyle =height：auto;> <！ - 标签内容容器 - > < div id =red-tab1> <？php $ dirname =PW-Files / $ listingid / kml /; $ kmls = glob（$ dirname。*）; $ html =; //使用foreach循环显示kmls 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;高度：300像素;浮：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>地图在哪里？< / p> < / div> < div id =red-tab2> < h2>标签二< / h2> < p> Aenean dui nulla，egestas坐在amet个人简历，facilisis id odio。 Donec dictum gravida feugiat。< / p> < p>每个conubia nostra，每个inceptos himenaeos的班级taciti sociosqu ad litora torquent。 Cras pretium elit et erat condimentum et volutpat lorem vehicula< / p> < p> Morbi tincidunt pharetra orci commodo molestie。如果您有任何疑问，请与我们联系。< / p> < / div> < div id =red-tab3> < h2>标签三< / 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 velna< / h3> < p> Donec purus leo，porttitor eu molestie quis，porttitor sit amet ipsum。每个conubia nostra，每个inceptos himenaeos班级taciti sociosqu广告litora扭矩。 Donec积累了ornare elit id imperdiet。 < / p为H. < p>暂停交易。 Cras lacinia porttitor urna，vitae molestie libero posuere et。 < / p为H. < / div> < div id =red-tab4> < h2>标签四< / h2> < p> Magnis disparturient montes，nascetur ridiculus mus。 Nullam ac massa quis nisi porta mollis venenatis坐在amet urna。在mauris velit，sed bibendum turpis中。< / p> < p> Nam ornare vulputate risus，id volutpat elit porttitor non。在接下来的nisi vel lectus dapibus sodales中。 Pellentesque栖息地morbi tristique senectus et netus et malesuada fames ac turpis egestas。 Praesent bibendum sagittis libero。< / p> < / div> < / div> <！ - / dc_tabs_type_4_content - > < div class =dc_clear>< / div> <！ - 换行符/清除行 - > < / div> < script type =text / javascript> / *标签4 * / $（document）.ready（function（）{ $（＃dc_tabs_type_4_content div）。hide（）; //最初隐藏所有dc_tabs_type_4_content $（＃dc_tabs_type_4 li：first）。attr（id，current）; //激活第一个标签 $（＃dc_tabs_type_4_content div：first）。fadeIn ）; //显示第一个标签dc_tabs_type_4_content $（'＃dc_tabs_type_4 a'）。click（function（e）{ e.preventDefault（）; $（＃）; //隐藏所有的dc_tabs_type_4_content $（＃dc_tabs_type_4 li）。attr（id，）; //重置id的 $（this）。 parent（）。attr（id，current）; //激活这个 $（'＃'+ $（this）.attr（'title'））。fadeIn（）; //显示dc_tabs_type_4_content为当前标签}）; }）（）; < / script> 这是我在网上找到的最接近的东西： Google地图和jQuery标签。他将hide（）更改为css.visibility。然而，他的代码与我的代码有点不同，所以我不确定我应该怎样做，因为我的JavaScript和css不够先进，但我想学习。这是他声称为他工作的Dom代码： $（document）.ready（function（） { //默认动作 $（。tab_content）.css（{'visibility'：'hidden'，'position'：'absolute'}）; $（ul.tabs li：first）。addClass（active）。show（）; $（。tab_content：first）。css（{'visibility'：'visible'，'position '：'static'}）; //点击事件 $（ul.tabs li）。click（function（）{ $（ul。标签li）。removeClass（active）; $（this）.addClass（active）; $（。tab_content）。css（{'visibility'：'hidden' ，'position'：'absolute'}）; var activeTab = $（this）.find（a）。attr（href）; $（activeTa b）.css（{'visibility'：'visible'，'position'：'static'}）; 返回false; }）; }）; 解决方案我在代码中发现了几个问题：缺少< / div> 结束标记导致标签1是标签2-4的父项修复：添加2个结束标签来终止标签1并＃dc_tabs_type_4_container 广泛的jQuery选择器在＃dc_tabs_type_4_content 中隐藏所有 < div> code>。这些隐藏的< div> s在代码库的任何其他部分都没有被隐藏。使用＃dc_tabs_type_4_content> div ，它仅选择制表符，并在制表符中排除< div> s 缺少位置：绝对在样式属性＃dc_tabs_4_content 。这允许父母完全包含中的地图（或文本）修复：删除 height：auto 并插入 position：absolute 更新的JSFiddle My google maps will not load within the first tab (active tab) of my dcodes tabs jquery script. I believe the map is being initialized before the active tab div is visible. Some guys, as a work around, initialized() later on in the script or when the tab is actually clicked and opened. This will not work for me as I have multiple maps being loaded on the same page and a php loop is passing variables to javascript as each function is called.If I have to do without the tabs, I will. But, it will make my page look a lot cleaner if I could put my maps into a tab.When I comment out the lines that have hide(), the maps do appear within the tab.I am using Google Maps API v3Opera Tabs (Style 4) http://www.dcodes.net/2/docs/tabs.htmlHere is the link to the js fiddle code which I pulled out of view page source.I did try storing the display_kmlmap() function into a php variable and then printing it after the javascript for the tabs to see if that made a difference and it didn't.Here is my code: <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>  <link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/tabs/css/dc_tabs.css" /><script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.dcodes.net/2/tabs/js/dc_tabs.js"></script> <div class="dc_tabs_type_4_container" style="width:90%; height:auto;"> <ul id="dc_tabs_type_4">  <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;">   <div id="red-tab1"> <?php$dirname = "PW-Files/$listingid/kml/";$kmls = glob($dirname."*"); $html = "";//Display kmls using foreach loopforeach($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>   <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>   <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>   <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>  </div> <div class="dc_clear"></div> </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>This is the closest thing i've found on the web: Google Maps and jQuery Tabs by Dom. He changed hide() to css.visibility. However, his code is a little different from mine so i'm not sure what I should do to mine since I am not advanced enough with javascript and css, but I would like to learn.Here is Dom's code which he claimed worked for him: $(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; }); }); 解决方案 There were a few issues I found in your code:Missing </div> end tags resulted in tab 1 being the parent of tabs 2-4Fix: add 2 end tags to terminate tab 1 and #dc_tabs_type_4_containerBroad jQuery selectors like #dc_tabs_type_4_content div were hiding all <div>s which were in #dc_tabs_type_4_content. These hidden <div>s were not being unhidden in any other part of the codebaseFix: use #dc_tabs_type_4_content > div, which only selects tabs and excludes <div>s within tabsMissing position: absolute in style attribute of #dc_tabs_4_content. This allows the parent to completely contain the map (or text) insideFix: remove height: auto and insert position: absoluteUpdated JSFiddle 这篇关于我怎样才能让我的谷歌地图加载在jquery选项卡中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！

SED

我怎样才能让我的谷歌地图加载在jquery选项卡中？