Question

谷歌地图放置在jQuery标签内时不起作用是一个遍布网络的问题。到目前为止，在我的研究中，似乎没有一种解决方案可行。希望有人在这里帮忙...

这是Firefox 10，Chrome 17，Safari 5.1.2，Opera 11.61中错误的屏幕截图。 http://www.flickr.com/photos/75523633@N04/6932970713/

错误在IE8中不存在，在9中是间歇性的。在Firefox中，当你打开FireBug时它会消失。

该网站位于Wordpress 3.3.1中，并通过插件生成/检索地图。我使用哪个地图插件似乎并不重要;错误保持不变。根据我的研究，这似乎是选项卡和Google Map API javascript之间的js / jQuery问题，而不是Wordpress /插件问题。

这是我的代码。现在，我正在使用wp-gmappity-easy-google-maps插件来制作地图，但我也尝试了综合谷歌地图插件。两者都在标签之外工作得很好。

HTML：

// Header calls:
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/scripts/tabs.min.js'></script>
// HTML Body:
<div class="tabs_framed_container">
<ul class="tabs_framed">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Map Tab</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>
<div class="tabs_framed_content">
    <h2>Tab 1 Content</h2>
    <!-- Some Content -->
</div>
<div class="tabs_framed_content">
    <h2>Tab 2 Content</h2>
    <!-- Some Content -->
</div>
    <h2>Tab 3 Content</h2>
    <!-- Some Content -->
</div>
<div class="tabs_framed_content">
    <div class="map_container">
        <div style="width:900px;margin-left:auto;margin-right:auto;">
            <div class="wpgmappity_container" id="wpgmappity-map-1" style="width:900px;height:400px;margin-left:auto;margin-right:auto;"></div>
        </div>
        <script type="text/javascript">
            function wpgmappity_maps_loaded1() {
            var latlng = new google.maps.LatLng(42.4005322,-71.2750094);
            var options = {
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoomControl : true,
                zoomControlOptions :
                {
                    style: google.maps.ZoomControlStyle.SMALL,
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                mapTypeControl : true,
                mapTypeControlOptions :
                {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                scaleControl : true,
                scaleControlOptions :
                {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                streetViewControl : true,
                streetViewControlOptions :
                {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                panControl : false,  zoom : 14
            };
            var wpgmappitymap1 = new google.maps.Map(document.getElementById('wpgmappity-map-1'), options);
            var point0 = new google.maps.LatLng(42.4005322,-71.2750093);
            var marker1_0 = new google.maps.Marker({
                icon : 'http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/images/mapmarker.png',
                position : point0,
                map : wpgmappitymap1
                });
            }
            jQuery(window).load(function() {
                wpgmappity_maps_loaded1();
            });
        </script>
    </div>
</div>
<div class="tabs_framed_content">
    <h2>Tab 2 Content</h2>
    <!-- Some Content -->
</div>

以下是相关的CSS：

.tabs_framed{padding:0;margin:0;list-style-type:none;clear:left;height:25px;border-bottom:1px solid #E5E5E5;}
.tabs_framed_container{margin-bottom:40px;}
.tabs_framed a{
    display:block; position:relative; background:#fafafa; border:1px solid #E5E5E5; padding:7px 30px; margin-right:2px;
    font-size:10px; text-decoration:none; text-transform:uppercase; letter-spacing:1px; line-height:10px; color:#777;
    opacity:1; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease;
}
.tabs_framed a:hover{color:#20548B;text-decoration:none;background:#fff;}
.tabs_framed a.current{color:#000;cursor:default;border-bottom:1px solid #fff;background:#fff;}
.tabs_framed li,{padding:0;margin:0;list-style-type:none;float:left;}
.tabs_framed_content{display:none;background-color:#fff;border:1px solid #E5E5E5;border-width:0 1px 1px 1px;padding:30px 30px 15px 30px;}

div.wpgmappity_container img { 
    background-position: 0% 0%;
    background-color: none !important;
    max-width: none !important;
    background-image: none !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}

以下是管理我的标签的文件的链接： http://themes.mysitemyway.com/awake/wp-content/themes/awake/lib/scripts/tabs.min.js

flowplayer.org/tools/forum/25/79274是我发现的一个解决方案（滚动到底部）。但是，checkResize和resizeMap不再有效（请参阅code.google.com/apis/maps/documentation/javascript/reference.html#Map上的api参考，向下滚动一点“事件”并找到google.maps.event。触发（map，'resize'），这显然是替换代码）。 www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps是另一个太旧的文章。

我见过这个提议：

jQuery(document).ready(function(){
jQuery('.tabs_container').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        google.maps.event.trigger(map, 'resize');
    }
});
});

但我不知道如何实现它（尝试了几种方法但没有成功）或者它是否可行。

从我的所有研究中，当选择包含地图的选项卡时，您似乎必须触发地图调整大小事件。到目前为止，我没有运气适应任何解决方案 - 特别是因为我熟悉js / jQuery。似乎熟悉js或jQuery的人可以解决这个问题。

请帮帮我。

Answer 1

rogercut的回答让我得到了我需要的地方。我正在使用Bootstrap选项卡，嵌套，无法让地图更新。

当我点击标签组2（＃tg2）时，地图选项卡是第一个显示的标签。如果有人在标签组2中点击了第二级标签（＃tab1），我还需要触发调整大小。

单击处理程序可以正常工作，但问题是单击时，选项卡仍然隐藏...通过设置一个小延迟，它会在调整大小开始之前为标签显示时间。

// Create Map
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(48.8582, 2.2945), //I see Paris, I see France
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

//Bind click handlers - Here's the important part
$('a[href=#tab1], a[href=#tg2]').on('click', function() {
    setTimeout(function(){
        google.maps.event.trigger(map, 'resize');
    }, 50);
});

因此，我们告诉浏览器在点击后等待50ms进行调整大小。在我的测试中，50ms有足够的时间来显示标签，但又足够短，以至于用户并不会注意到它。事实上，我测试的4-5台机器上的测试延迟只有1毫秒 - 即使是我们坐在存储器中的狗慢速笔记本电脑。 50毫秒是安全的。

希望这有助于其他人。

Answer 2

我放弃了插件并使用了谷歌地图短代码，该代码已针对我正在使用的主题发布。虽然我失去了自定义标记功能，但主题开发人员终于能够帮助实现这一切。他们将以下代码添加到短代码PHP文件中。

jQuery('ul.tabs_framed').data('tabs').onClick(function(e,index) {
    resizeMap(" . 'map'.$map_id .") 
});
function resizeMap(m) {
    x = m.getZoom();
    c = m.getCenter();
    google.maps.event.trigger(m, 'resize');
    m.setZoom(x);
    m.setCenter(c);
};

当单击包含地图的选项卡时，此代码会触发地图重新加载。它还会重新定位地图。此解决方案为我解决了问题，谷歌地图现在显示在jquery选项卡中。希望这里的一些更精通javascript的用户（以及插件开发人员!!!）可以将此解决方案适应他们自己的map-in-tabs问题。

Answer 3

在开发包含地图标签内容的网站时，我遇到了同样的问题。该网站为http://samet.com.ar（西班牙文，点击地图图标或“ubicacion”链接）。每当tab选项卡与其选项卡组中的其他选项卡一起加载时，您提到的相同错误就会出现。我发现如果我可以设法在其他选项卡之后加载一些时间，那么就没有任何问题了。

我有能力做到这一点，因为无论如何我给了包装器显示的时间为3.5秒，以便加载所有背景照片并且加载时地图在隐形标签中，所以我不需要它立即出现。

然后地图选项卡在整个包装器之后立即加载为回调函数。如果您检查页面，请查找id'panel-container'。在'窗格'里面你会发现最后加载的地图div。

我在index.php页面中使用的相关jQuery代码如下：

<script type='text/javascript'>
   ( function( $ ) {
     // for SOF post --- previous code deleted ---
     $( "#wrapper" ).delay( 3500 ).fadeIn( "slow",function() {
     // Animation complete
     <?php $post_map = get_posts('name=map');?>
     $( "#map" ).delay( 1000 ).append( <?php echo "'".$post_map[0]->post_content."'"; ?> );
            } );
 } )( jQuery );
</script>

我希望这会有所帮助。忘了提到地图代码是作为特定帖子中的内容嵌入的。（顺便说一句，地图标记位于右上方，用于显示主要通道。）

干杯！

Answer 4

问题（如上所述和其他地方）是map div必须是可见的才能工作。因此，在可见的选项卡中加载地图。然后，如果您愿意，请切换到要显示的选项卡。

为此，我向地图添加了一次性事件监听器。在该功能内部，我更改为第一个选项卡。在加载期间，您会在更改选项卡之前看到地图区域大约一秒钟。优点是用户无需为此工作。

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     $("#Tabs").tabs('select',0);
});

Answer 5

以上答案中没有一个是完全正确的。出现此问题的原因是地图画布设置为width：0;在加载之前默认值为0，然后期望您传递维度或从父级获取维度，因为这是在jQuery选项卡内部没有维度。

如上所述，绑定到标签的click事件并设置map_canvas维度，然后调用google.maps.event.trigger（）

 $(function(){

$('#maptab').bind('click',function() {
            var w = $('#map_view').width();
            var h = $('#map_view').height();
            $('#map_canvas').css({ width: w, height: h });
           google.maps.event.trigger(map, 'resize');

        });

});

Answer 6

在我在标签内部实施google-map时遇到同样的问题，特别是当地图不在第一个选择中时。但我已经尝试过，并且使用这样一个简单的解决方案：

制作一个简单的js函数：

<script type="text/javascript">

function ResetMap() {
google.maps.event.trigger(map, 'resize');
}

</script>


<li><a href="#tab1">Select Tab1</a></li>
<li onClick="ResetMap();"><a href="#tab2">Select Google Map</a></li>

<div class="tab1-content" id="tab1">Content tab1</div>
<div class="tab2-content" id="tab2"><?php include_once ('google-map.php') ?></div>

Answer 7

我为bootstrap Tab解决了这个问题。只需在显示地图容器后调用resize map函数即可。

我在initialize（）函数中添加了以下内容：

jQuery('.nav-tabs a[href="#my-map"]').on('shown.bs.tab', function(){
         google.maps.event.trigger(map, 'resize');
         map.setZoom(15); //You need to reset zoom
         map.setCenter(myLatlng); //You need to reset the center
    });

Answer 8

这可能不适合所有人！对我有用的一个解决方案是隐藏选项卡显示但在某个地方“对用户不可见”。这将允许地图渲染，即使它不在第一个/活动选项卡中。找到一种方法来定位隐藏的标签：

.tab-hidden{
    position: absolute !important;
    left: -10000px !important; /* maybe not that much */
    display:block !important;
    width:100% !important; /* I found this to be very important*/
}

地图宽度100％而非固定宽度。

Answer 9

尝试一下：

更改

<li><a href="#">Map Tab</a></li>

到

<li><a href="#" id="maptab">Map Tab</a></li>

然后添加此javascript

$(document).ready(function(){
  $('#maptab').bind('onClick', function() {
    google.maps.event.trigger(map, 'resize');
  });
});

在页面顶部的脚本标记中。这应该为你做什么：

通过将id属性添加到标签链接，您可以明确指定其中有一个地图。然后，您正在侦听选择选项卡时触发的jQuery选项卡库提供的onClick事件，这会触发重新调整地图大小。

Answer 10

问题很简单。地图必须在具有尺寸的元素中渲染。如果使用隐藏选项卡内容的选项卡系统，则在隐藏父级时，选项卡内容中的所有元素都没有维度。如果jQuery tools css允许你这样做，请在屏幕外设置“隐藏”内容而不是隐藏。

为了使用： google.maps.event.trigger（map，'resize'）;

您需要访问初始映射对象变量“var wpgmappitymap1”，但其范围在map init函数中。如果你把它变成一个全局变量，你可以把它放在你的调整大小触发器

中

  google.maps.event.trigger(wpgmappitymap1, 'resize');

Answer 11

我遇到了同样的问题，这是我的解决方案。

我添加了ajaxComplete函数，该函数在所有ajax请求或帖子完成时触发。

<script type="text/javascript">   
   $(document).ajaxComplete(function(e){
         calculateRoute("from","to");            
   });        
</script>

Answer 12

它为我工作，符合我的要求，你可以用它作为参考：

<script type="text/javascript">

function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

function getCookie (name) {
    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;
    if (cookie.length > 0) {
        offset = cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);
            if (end == -1) {
                end = cookie.length;
            }
            setStr = unescape(cookie.substring(offset, end));
        }
    }
    if (setStr == 'false') {
        setStr = false;
    } 
    if (setStr == 'true') {
        setStr = true;
    }
    if (setStr == 'null') {
        setStr = null;
    }
    return(setStr);
}

function hidePopup() {
    setCookie('popup_state', false); 
    document.getElementById('popup').style.display = 'none';
    document.getElementById('hiding').style.display = 'block';

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}

function showPopup() {
    setCookie('popup_state', null);
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hideup').style.display = 'none';

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );   
}

function checkPopup() {
    if (getCookie('popup_state') == null) { // if popup was not closed
        document.getElementById('popup').style.display = 'block';
        document.getElementById('hiding').style.display = 'block';

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

  }   
}

</script>


<body onload="checkPopup();">

    <div class="map-button" id="hiding"><a href="#" onclick="showPopup(); return false;"><img src="images/map_magnify.png" alt="" title="Show Google Map" ></a></div>

    <div class="map-button" id="popup" style="display:none"> <a href="#" onclick="hidePopup(); return false;"><img src="images/map_delete.png" alt="" title="Hide Google Map" ></a>
    <div id="gmap"></div>
    </div>
</body>

注意：你可以制作CSS课程＆＃39; map-button＆＃39;用于根据需要定位按钮。放置你自己的图像。替换id =＆＃34; gmap＆＃34;就像你的。希望它可以帮到你。

Answer 13

在css中试试这个：

.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) {
 display: block;
 height: 0;
 overflow-y: hidden;
}

Google地图无法在jQuery标签中使用

13 个答案: