当使用Google Maps API在jQuery UI选项卡中呈现地图时,有许多问题似乎都是众所周知的.我已经看到关于类似问题发布的SO问题(例如这里和这里),但那里的解决方案似乎只适用于Maps API的v2.我检查过的其他参考文献在这里和这里,以及我可以通过谷歌搜索挖掘的几乎所有内容.
我一直在尝试将地图(使用API的v3)填充到具有混合结果的jQuery选项卡中.我正在使用最新版本的一切(目前jQuery 1.3.2,jQuery UI 1.7.2,不了解Maps).
这是标记和javascript:
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
和
$(document).ready(function() {
var map = null;
$('#dashtabs').tabs();
$('#dashtabs').bind('tabsshow', function(event, ui) { …Run Code Online (Sandbox Code Playgroud) 我的谷歌地图将不会加载到我的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 …Run Code Online (Sandbox Code Playgroud)