Jak*_* H. 3 javascript css jquery google-maps google-maps-api-3
我的谷歌地图将不会加载到我的dcodes标签jquery脚本的第一个标签(活动标签)中.我相信在活动tab div可见之前,地图正在被初始化.有些人,作为一种解决方法,稍后在脚本中初始化()或实际点击并打开选项卡.这对我不起作用,因为我在同一页面上加载了多个地图,并且在调用每个函数时,php循环将变量传递给javascript.
如果我必须没有标签,我会.但是,如果我可以将我的地图放入选项卡中,它将使我的页面看起来更清晰.
当我注释掉具有hide()的行时,地图会显示在选项卡中.
我使用的是Google Maps API v3
Opera Tabs(Style 4)http://www.dcodes.net/2/docs/tabs.html
这是我从视图页面源中提取的js小提琴代码的链接.
我确实尝试将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的jQuery标签.他将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;
});
});
Tyl*_*ich 12
我在您的代码中发现了一些问题:
</div>结束标记导致选项卡1成为选项卡2-4的父级
#dc_tabs_type_4_container#dc_tabs_type_4_content div隐藏了所有 <div>的#dc_tabs_type_4_content.这些隐藏<div>的东西在代码库的任何其他部分都没有被隐藏
#dc_tabs_type_4_content > div,仅选择选项卡并排除<div>选项卡中的sposition: absolute的style属性#dc_tabs_4_content.这允许父级完全包含内部的地图(或文本)
height: auto并插入position: absolute