Question

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

<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>

这是我的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>

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

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

Google Maps V3未加载jQuery标签

1 个答案: