谷歌地图API 3正在行动

我正试图在jqueryui选项卡中放置一个谷歌地图。 地图显示出来; 但是，完整的地图本身并没有填满它的canvas。 此外，尝试滚动地图会让它变得浑浊。 有没有人有任何想法？ 这是我正在使用的代码：

       html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% }     $(document).ready(function() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); });            
 
 
One
 
Two
 
Three
 
 
 Tab 1's Content 
 
 Tab 2's Content 
 
 
 
 
  $("#tabs").tabs();     

Answer 1

这是一个已知的问题。 解决方案是在显示选项卡时动态加载地图。 这是一个非常简单的通用解决方案。 加载特定选项卡时，检查映射是否存在并根据需要加载。

 $(document).ready(function() { function my_tab_reveal() { // or whatever function you use for showing your tabs content // whatever your code for revealing tab content is here if (!loaded) { // this checks to see if the map is not already loaded load(); // this loads the map } } var loaded = false; load = function() { // your google maps JavaScript code goes here // checks tiles to see if map has loaded google.maps.event.addListener(map, "tilesloaded", function() { loaded = true; }); } }); 

---

编辑：

根据jQuery UI文档 ，您可以在激活选项卡时使用回调函数。

“激活标签后触发（动画完成后）。”

 $(document).ready(function() { $("#tabs").on( "tabsactivate", function( event, ui ) { $("#map_canvas").each(function() { if (!loaded) { // this checks to see if the map is not already loaded load(); // this loads the map } }); }); var loaded = false; load = function() { // your google maps JavaScript code goes here var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // checks tiles to see if map has loaded google.maps.event.addListener(map, "tilesloaded", function() { loaded = true; }); } }); 

Answer 2

另一种解决方案是在第一次显示选项卡内容后告诉地图resize并重新定位。

在创建地图的行之后直接添加这些行：

 var hasRevealedMap = false; $('.ui-tabs').bind('tabsshow', function(event, ui) { $("#" + ui.panel.id + " #map_canvas").each(function() { if (!hasRevealedMap) { google.maps.event.trigger(map, "resize"); map.setCenter(center); map.setZoom(8); hasRevealedMap = true; } }); });