Google Maps V3未加载jQuery标签

我在jQuery选项卡中无法运行谷歌地图。 不知道为什么会这样。

 $(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);  

这是我的HTML

 
 
Information
 
Description
 
Map
 
Images
 
  
 
{ImportantInfo}
 
{description}
 
 
Longitude: {longitude}
 Latitude: {latitude}
 
 
 
 {start block images}  {end block images} 
  

这里有一些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; } 

Answer 1

感谢您的示例页面！ 我看到的第一个错误是在你的CSS中。

 /* tab pane */ .css-panes div { display: none; ... } 

上面的代码片段用于隐藏未加载的css页面，但它也会向下延伸并隐藏任何具有类.css-panes的元素下的div。 在这种情况下， display: none; 正在map_canvas div上设置。 选择其他元素（如大小调整和着色信息）也会混淆Google Maps API绘制的所有div。 您可能应该做一些不太积极的事情，也许可以为每个窗格div添加一个pane类，并直接在其上选择。

稍微清理样式表后，我可以通过在JavaScript控制台中运行initialize()函数来手动加载地图。 看起来您的绑定/事件触发器代码未按预期触发。 我添加了一个简单的console.log("Foo"); 甚至是alert("Test"); 代替initialize方法调用来帮助调试tabshow事件。 （我没有运气好，我也不是jQuery标签专家）