0

我正在尝试在 jquery 选项卡中显示谷歌地图。我的代码可以工作，但不能在选项卡内渲染地图，我已经应用了 stackoverflow 上发布的各种问题中给出的所有技术，但它们似乎都没有工作。下面是我的代码

css

.tab_container { }
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    width: 100%;}

    ul.tabs li  {
        float: left;
        margin: 0;
        padding: 0;
        height: 31px;
        line-height: 31px;
        border: 1px solid #CCC;
        border-left: none;
        margin-bottom: -1px;
        background: #e0e0e0 url(images/accordion_header.png) repeat-x top right;
        overflow: hidden;
        position: relative; }   
        ul.tabs li a        {
            text-decoration: none;
            color: #222;
            display: block;
            font-size: 1.2em;
            padding: 0 20px;
            border: 1px solid #fff;
            outline: none;  }
    ul.tabs li a:hover { background: #ccc; }    
            ul.tabs li.active, ul.tabs li.active a:hover  { background: #fff; border-bottom: 1px solid #fff; }

.tab_content_container {
    border: 1px solid #CCC;
    border-top: none;
    clear: both;
    float: left; 
    width: 100%;
    background: #fff;}
    .tab_content { font-size: 1.2em; padding: 20px 20px 10px; display: none; }  
    .tab_content:first-child { display: block; }

jQuery 函数

(function($){
    $.fn.tabs = function(options) { 
        var defaults = {};  
        var options = $.extend(defaults, options);  
        return this.each( function() {          
            var $tabContainer = $(this);
            var $tabLi = $tabContainer.find ('.tabs li');
            var $tabContent = $tabContainer.find ('.tab_content');          
            $tabContent.hide ();
            $tabLi.eq (0).addClass ('active').show ();
            $tabContent.eq (0).show ();

            $tabLi.live ('click' , function () 
            {
                var activeTab = $(this).find ('a').attr ('href');

                $tabLi.removeClass("active");
                $(this).addClass("active");
                $tabContent.hide ();
                $(activeTab).css({'visibility':'visible'});                 
                $tabContainer.find (activeTab).fadeIn ('slow');
                if(activeTab == '#about') {
                        initialize();//google map
                      }
                return false;
            });         });         };

})(jQuery);
function initialize() {
      var myLatlng = new google.maps.LatLng(28.46583740, 77.03269809999999);
      var mapOptions = {
        center: myLatlng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
        var marker = new google.maps.Marker({
        position: myLatlng,
        });    
        google.maps.event.addListener(map, "idle", function(){
            marker.setMap(map);
        }); 
    }

这是 HTML div

<div id="about" class="tab_content" style="display: none; "> 
                                        <div id="map_canvas" style="width:100%; height:100%"></div>
                                    </div>
4

1 回答 1

0

我认为问题在这里：

 var marker = new google.maps.Marker({
    position: myLatlng  //<----- remove the ' , '
 });

看看是否有效。

于 2012-11-16T11:57:17.803 回答