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

放置在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:   // HTML Body: 
 
 
Tab 1
 
Tab 2
 
Tab 3
 
Map Tab
 
Tab 3
 
 
 
Tab 1 Content
  
 
 
Tab 2 Content
  
 
Tab 3 Content
  
 
 
 
 
 
  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://sofzh.miximages.com/jquery/mapmarker.png', position : point0, map : wpgmappitymap1 }); } jQuery(window).load(function() { wpgmappity_maps_loaded1(); });  
 
 
 
Tab 2 Content
   

这是相关的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'); } }); }); 

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

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

请帮我。

Answer 1

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

当我单击选项卡组2（＃tg2）时，地图选项卡是第一个显示的选项卡。 如果有人单击选项卡组2中的第二级选项卡（＃tab1），我还需要触发resize。

单击处理程序可以工作，但问题是单击时，选项卡仍然隐藏…通过设置一个小延迟，它给出了在resize触发之前显示选项卡的时间。

 // 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进行resize。 在我的测试中，50ms有足够的时间让标签显示，但又足够短，以至于用户并不会注意到它。 事实上，我测试的4-5台机器上的测试延迟只有1毫秒 – 即使是我们坐在存储器中的狗慢速笔记本电脑。 50毫秒是安全的。

希望这有助于其他人。

Answer 2

我放弃了插件，并使用谷歌地图短代码，该短代码已针对我正在使用的主题发布。 虽然我失去了自定义标记function，但主题开发人员终于能够帮助实现这一切。 他们将以下代码添加到短代码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 （用西class牙语，点击地图图标或’ubicacion’链接）。 当tab选项卡与其选项卡组中的其他选项卡一起加载时，会出现同样的错误。 我发现如果我可以设法在其他标签之后加载一些时间，那么就没有任何问题了。

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

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

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

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

干杯!

Answer 4

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

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

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

Answer 5

以上答案中没有一个是完全正确的。 出现此问题的原因是地图canvas设置为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函数：

  
Select Tab1
 
Select Google Map
 
Content tab1
 
 

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

尝试一下：

更改

 
Map Tab 

至

 
Map Tab 

然后添加这个javascript

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

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

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

Answer 10

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

要使用：google.maps.event.trigger（map，’resize’）;

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

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

Answer 11

我有同样的问题，这是我的解决方案。

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

Answer 12

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

注意：您可以根据需要使用CSS类“map-button”来定位按钮。 把你自己的形象放在臀部。 将id =“gmap”替换为您的。 希望它能帮到你。

Answer 13

在css中试试这个：

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