谷歌地图V3不加载jQuery标签 [英] Google Maps V3 not loading with jQuery tabs
问题描述
当我在jQuery选项卡中运行时，我无法运行Google地图。不知道这是为什么。
< script type =text / javascript>
$（document）.ready（function（）{
var map = null;
$（ul.css-tabs）。tabs（div.css-panes> div ）;
$（div.css-panes> div）bind（'tabsshow'，function（event，ui）{
if（ui.panel.id =='map_tab' &&！map）
{
map = initialize（）;
google.maps.event.trigger（map，'resize'）;
}
}）;
}）;
函数initialize（）{
var latlng = new google.maps.LatLng（{latitude}，{longitude}）;
var myOptions = {
zoom：8，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），
myOptions）;
var marker = new google.maps.Marker（{
position：latlng，
map：map，
title：{CaveTitle}
}）;
返回地图;
};
//google.maps.event.addDomListener(window，'load'，initialize）;
< / script>
这是我的html
< ul class =css-tabs>
< li style =list-style-image：none;>< a href =＃>信息< / a>< / li>
< li style =list-style-image：none;>< a href =＃>描述< / a>< / li>
< li style =list-style-image：none;>< a href =＃>地图< / a>< / li>
< li style =list-style-image：none;>< a href =＃>图片< / a>< / li>
< / ul>
<！ - 窗格 - >
< div class =css-panes>
< div>< p> {重要信息}< / p>< / div>
< div>< p> {description}< / p>< / div>
< div style =height：300px; ID = map_tab >
< p>经度：{经度}< br />
纬度：{latitude}< br />< / p>
< p>< div id =map_canvasstyle =width：500px; height：200px>< / div>< / p>
< / div>
< div>< p>
{start block images}
< a href =images / original / {image}class =thickbox>< img src =images / thumbnail / {image}width = 100alt ={title}/>< / a>
{end block images}
< / p>< / div>
< / div>
这里有一些CSS
/ *标签的根元素* /
ul.css-tabs {
margin-left：10px;
padding：0;
height：30px;
width：750px;
border-bottom：1px solid＃666;
}
/ *单个标签* /
ul.css-tabs li {
float：left;
padding：0;
list-style-type：none;
}
/ *链接。使用背景图片* /
ul.css-tabs a {
float：left;
font-size：13px;
display：block;
padding：5px 30px;
text-decoration：none;
border：1px solid＃666;
border-bottom：0px;
height：18px;
颜色：＃777;
margin-right：2px;
职位：亲属;
top：1px;
outline：0;
-moz-border-radius：4px 4px 0 0;
背景：#bbbbbb url（nav.jpg）repeat-x;
颜色：#FFF;
text-align：left;
white-space：nowrap;
}
ul.css-tabs a：hover {
background-color：＃F7F7F7;
颜色：＃333;
}
/ *选定标签* /
ul.css-tabs a.current {
background-color：#ddd;
border-bottom：1px solid #ddd;
颜色：＃000;
cursor：default;
}
/ *制表符窗格* /
.css-panes div {
display：none;
border：1px solid＃666;
border-width：0 1px 1px 1px;
min-height：800px;
padding：15px 20px;
background-color：#ddd;
margin-left：10px;
width：710px;
位置：绝对;剩余
：-1000px;
感谢您的示例页面！ ！我看到的第一个错误是在你的CSS中。
/ *选项卡窗格* /
.css-panes div {
display：none;
...
}
上面的代码片段用于隐藏没有被加载的css页面，但是它也覆盖并隐藏位于具有类.css-panes类的元素下的任何 div。在这种情况下， display：none; 正在map_canvas div上设置。这个选择其他元素，例如尺寸和着色信息，也混淆了Google Maps API绘制的所有div。你应该做一些不那么积极的事情，或者为每个窗格div添加一个窗格类并直接选择它。
清理完样式表后，我可以通过在JavaScript控制台中运行 initialize（）函数来手动加载映射。它看起来像你的绑定/事件触发器代码没有按预期发射。我会添加一个简单的 console.log（Foo）; 甚至是一个 alert（Test）; 代替初始化方法调用来帮助调试tabshow事件。 （我没有运气让它工作，我也不是jQuery选项卡专家）
I can't get google maps running when beeing in a jQuery tab. Not sure why this is.
<script type="text/javascript">
$(document).ready(function() {
var map = null;
$("ul.css-tabs").tabs("div.css-panes > div");
$("div.css-panes > div").bind('tabsshow', function(event, ui) {
if (ui.panel.id == 'map_tab' && !map)
{
map = initialize();
google.maps.event.trigger(map, 'resize');
}
});
});
function initialize() {
var latlng = new google.maps.LatLng({latitude},{longitude});
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"{CaveTitle}"
});
return map;
};
//google.maps.event.addDomListener(window, 'load', initialize);
</script>
This is my html
<ul class="css-tabs">
<li style="list-style-image: none;"><a href="#">Information</a></li>
<li style="list-style-image: none;"><a href="#">Description</a></li>
<li style="list-style-image: none;"><a href="#">Map</a></li>
<li style="list-style-image: none;"><a href="#">Images</a></li>
</ul>
<!-- panes -->
<div class="css-panes">
<div><p>{ImportantInfo}</p></div>
<div><p>{description}</p></div>
<div style="height:300px;" id="map_tab">
<p>Longitude: {longitude}<br />
Latitude: {latitude}<br /></p>
<p><div id="map_canvas" style="width: 500px; height: 200px"></div></p>
</div>
<div><p>
{start block images}
<a href="images/original/{image}" class="thickbox"><img src="images/thumbnail/{image}" width="100" alt="{title}"/></a>
{end block images}
</p></div>
</div>
Here some CSS
/* root element for tabs */
ul.css-tabs {
margin-left:10px;
padding:0;
height:30px;
width: 750px;
border-bottom:1px solid #666;
}
/* single tab */
ul.css-tabs li {
float:left;
padding:0;
list-style-type:none;
}
/* link inside the tab. uses a background image */
ul.css-tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:1px solid #666;
border-bottom:0px;
height:18px;
color:#777;
margin-right:2px;
position:relative;
top:1px;
outline:0;
-moz-border-radius:4px 4px 0 0;
background: #bbbbbb url(nav.jpg) repeat-x;
color: #FFF;
text-align: left;
white-space:nowrap;
}
ul.css-tabs a:hover {
background-color:#F7F7F7;
color:#333;
}
/* selected tab */
ul.css-tabs a.current {
background-color:#ddd;
border-bottom:1px solid #ddd;
color:#000;
cursor:default;
}
/* tab pane */
.css-panes div {
display:none;
border:1px solid #666;
border-width:0 1px 1px 1px;
min-height:800px;
padding:15px 20px;
background-color:#ddd;
margin-left: 10px;
width: 710px;
position: absolute;
left: -1000px;
}
Thanks for the sample page!!! The first bug I see is in your CSS.
/* tab pane */
.css-panes div {
display: none;
...
}
The snippet above is being used to hide the css pages that aren't being loaded, but it's also reaching down and hiding any div that is under an element with a class .css-panes. In this case, display: none; is getting set on the map_canvas div. This selectors other elements like the sizing and coloring info is also messing up all the divs the Google Maps API draws. You should probably do something a bit less aggressive and perhaps add a pane class to each pane div and select directly on that.
After cleaning up your stylesheet a bit I can manually load a map by running the initialize() function in a JavaScript console. It looks like your bind / event trigger code isn't firing as intended. I'd add a simple console.log("Foo"); or even an alert("Test"); in place of the initialize method call to help debug the tabshow event. (I haven't had any luck getting it to work, nor am I a jQuery tab expert)
这篇关于谷歌地图V3不加载jQuery标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
