Google Maps API v3 + jQuery UI 标签的问题答案

【问题标题】：Problems with Google Maps API v3 + jQuery UI TabsGoogle Maps API v3 + jQuery UI 标签的问题
【发布时间】：2010-11-28 12:41:56
【问题描述】：

在使用 Google Maps API 在 jQuery UI 选项卡中呈现地图时，有许多问题似乎是众所周知的。我已经看到发布了关于类似问题的 SO 问题（例如here 和here），但那里的解决方案似乎只适用于 Maps API 的 v2。我查看的其他参考资料是 here 和 here，以及我可以通过谷歌搜索找到的几乎所有内容。

我一直在尝试将地图（使用 API 的 v3）填充到 jQuery 选项卡中，结果好坏参半。我正在使用所有东西的最新版本（目前是 jQuery 1.3.2，jQuery UI 1.7.2，不知道地图）。

这是标记和javascript：

<body>
    <div id="dashtabs">
        <span class="logout">
            <a href="go away">Log out</a>
        </span>
        <!-- tabs -->
        <ul class="dashtabNavigation">
            <li><a href="#first_tab" >First</a></li>
            <li><a href="#second_tab" >Second</a></li>
            <li><a href="#map_tab" >Map</a></li>
        </ul>

        <!--  tab containers -->
        <div id="first_tab">This is my first tab</div>
        <div id="second_tab">This is my second tab</div>
        <div id="map_tab">
             <div id="map_canvas"></div>
        </div>
    </div>
</body>

和

$(document).ready(function() {
    var map = null;
    $('#dashtabs').tabs();
    $('#dashtabs').bind('tabsshow', function(event, ui) {
        if (ui.panel.id == 'map_tab' && !map)
        {
            map = initializeMap();
            google.maps.event.trigger(map, 'resize');
        }
    });
});

function initializeMap() {
    // Just some canned map for now
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map($('#map_canvas')[0], myOptions);
}

以下是我发现的有效/无效的内容（对于 Maps API v3）：

使用 jQuery UI 选项卡文档（以及我链接的两个问题的答案）中描述的偏左技术根本不起作用。事实上，功能最好的代码使用 CSS .ui-tabs .ui-tabs-hide { display: none; }。
让地图显示在选项卡中的唯一方法是将#map_canvas 的CSS 宽度和高度设置为绝对值。将宽度和高度更改为 auto 或 100% 会导致地图根本不显示，即使它已经成功渲染（使用绝对宽度和高度）。
我在 Maps API 之外的任何地方都找不到它的文档，但 map.checkResize() 将不再起作用。相反，您必须通过调用 google.maps.event.trigger(map, 'resize') 来触发调整大小事件。
如果地图未在绑定到 tabsshow 事件的函数内初始化，则地图本身会正确呈现，但控件不会 - 大多数只是完全丢失。

所以，这是我的问题：

有没有其他人有完成同样壮举的经验？如果是这样，由于文档中的技巧不适用于 Maps API v3，您如何确定实际可行的方法？
如何按照jQuery UI docs 使用 Ajax 加载选项卡内容？我还没有机会玩弄它，但我的猜测是它会进一步破坏 Maps。让它发挥作用的机会有多大（或者不值得尝试）？
如何让地图填满尽可能大的区域？我希望它填充标签并适应页面大小调整，就像在 maps.google.com 上完成的那样。但是，正如我所说，我似乎坚持只将绝对宽度和高度 CSS 应用于地图 div。

很抱歉，如果这是冗长的，但这可能是 Maps API v3 + jQuery 选项卡的唯一文档。干杯！

【问题讨论】：

我发现谷歌地图组对我做 jquery + 地图很有帮助。不过我没有使用标签或 jquery ui。
据我所知，所有问题都是将地图放入 jQuery UI 选项卡的直接结果。虽然地图组中的人可能对此有经验，但它似乎不是这个问题的地方。我可能会四处打听。
无赖。他们对 API 部分非常有帮助，但在 jquery 方面无法帮助您。
有效的解决方案！！！ :) stackoverflow.com/questions/12641798/…

标签： jquery google-maps jquery-ui-tabs google-maps-api-3

【解决方案1】：

注意：此答案收到了无效的第 3 方编辑，它实质上替换了其内容，这是第 3 方编辑不应该做的事情。但是，结果可能比原来的更有用，所以下面给出两个版本：

原作者 Anon 2010 年的版本，经过 Anon 的一次编辑

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

建议 http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 作为 v3 替代 v2 的 checkResize()。

Blech - 糟糕的谷歌，没有 cookie。

用户 Eugeniusz Fizdejko 的完整重写表单 2012：

添加标记时对我有用：

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

google.maps.event.addListener(map, "idle", function(){
    marker.setMap(map);
});

【讨论】：

太棒了。我在 jquery mobile / phonegap 应用程序上遇到了这个问题，这个修复为我解决了这个问题！
这让我找到了答案，上面的 code.google.com 链接几天前更新了引导选项卡，这个谷歌地图问题 $('a[data-toggle="tab" ]').on('shown.bs.tab', function (e) { google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() ); })

【解决方案2】：

实际上在上面划掉我的答案。 jQueryUI 网站有答案，这里是：

为什么……

...我的滑块、谷歌地图、sIFR 等。放置在隐藏位置时不起作用（非活动）标签？

任何需要一些其维度计算初始化在隐藏中不起作用选项卡，因为选项卡面板本身是通过 display: none 隐藏，以便任何里面的元素不会报告他们的实际宽度和高度（大多数为 0 浏览器）。

有一个简单的解决方法。使用用于隐藏不活动的偏左技术选项卡面板。例如。在您的样式表中替换类的规则选择器“.ui-tabs .ui-tabs-hide”与

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

对于 Google 地图，您还可以调整大小显示选项卡后的地图这个：

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

resizeMap() 将在特定地图上调用 Google 地图的 checkResize()。

【讨论】：

请编辑您的旧答案。最重要的是，我解决了 jQueryUI 网站建议的偏左技术在这种情况下不起作用的事实。
我很抱歉 - 我不知道我可以编辑现有评论。一直在写博客，只是习惯性地想着“一旦吐了，就收不回来了”。我能告诉你的是，我在此页面上的选项卡中完美地使用了地图/街景：jackying.brixwork.com/showlisting.php/63/… 我能做的最好的就是向你展示代码，也许你可以进行比较，看看有什么缺失/不同.. 我的街景在找到我发布的解决方案之前几天都没有工作。
#example 指的是什么？是地图还是标签的ID？ resizeMap() 是地图的 V3 函数吗？

【解决方案3】：

只需重新定义隐藏标签的 css 类：

.ui-tabs .ui-tabs-hide {
    position: absolute !important;
    left: -10000px !important;
    display:block !important;
}

【讨论】：

如果您没有生成 G 地图，则可以很好地解决 - 只需添加一个 on("click") 即可重置选项卡 div 的 css ..

【解决方案4】：

这就是您可以为 Google Maps v3 做的事情：

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(point); // be sure to reset the map center as well
});

【讨论】：

我不确定空闲事件应该如何提供帮助。即使它触发了，如果在用户决定拖动之前渲染仍然混乱，然后变得空闲，那有什么好处呢？调整大小在选项卡显示事件的上下文中或在超时/间隔中很有用。

【解决方案5】：

我在标签显示后加载地图。

这很老套，但对我有用。只需将地图 iframe 的 url 存储在 iframes rel 属性中，如下所示：

<iframe width="490" height="300" rel="http://maps.google.com/maps?f=q&amp;source=s..."></iframe>

此事件会将 iframe src 属性设置为 rel 内的 url。

        $("#tabs").tabs({
            show:function(event, ui) {
                var rel = $(ui.panel).find('iframe').attr('rel');
                $(ui.panel).find('iframe').attr('src',rel);
            }
        });

【讨论】：

好的，您是如何从 iframe 中获得 lat 和 lon pos 坐标的？

【解决方案6】：

这并不能回答你所有的问题，但我已经让它工作了，所有其他答案都缺少一件事——当你用“resize”事件重绘地图时，你会失去地图所在的地方以。因此，如果您的地图以某个位置为中心，您还需要再次使用 setCenter 更新地图的中心。

此外，您不希望每次触发选项卡更改时都初始化地图，因为这样做效率不高，并且可能导致额外的地理编码。首先，您需要保存居中位置，可以是静态纬度/经度，或者如果进行地理编码，可能如下所示：

var address = "21 Jump St, New York, NY"; 
var geocoder = new google.maps.Geocoder();    
var myOptions = {
  zoom: 16,      
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var center;

geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {        
    center = results[0].geometry.location;
    map.setCenter(center);
    var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});

然后

$("#tabs").tabs();

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "mapTab") {
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);   // Important to add this!      
    }
});

其中 'mapTab' 是您的 mapTab 的 ID，而 'map' 是您的地图对象的 var 名称。

【讨论】：

这种触发地图调整大小的方法也适用于 twitter 引导选项卡，方法是将其绑定到选项卡单击事件:) 您的解决方案是这里最好的解决方案 imo

【解决方案7】：

确保在初始化选项卡的 sn-p 之前调用初始化地图的代码。

我唯一的烦恼是单击地图选项卡会使浏览器跳转到关注地图，并且它打破了 jQuery 放置在主选项卡容器周围的默认边框。我在地图标签的 a 标签中添加了一个 return false onclick 调用来处理第一个标签，并在主标签 div 上添加了一个简单的border-size: 0 来处理第二个标签。

所有这些都对我有用。

祝你好运！

【讨论】：

【解决方案8】：

我已经通过每个论坛寻找答案......他们都说使用

map.checkResize()

解决方案....似乎没有任何效果...然后我...为什么在显示选项卡时不初始化选项卡所以我使用了这个

$("#servicesSlider ").tabs({        
                //event: 'mouseover'
            fx: { height: 'toggle', opacity: 'toggle'},
            show: function(event, ui) {
                  if (ui.panel.id == "service5") {
                      $(ui.panel).css("height","100%")
                    initialize()
                    }}
            });

“service5”是我的标签页的 ID，其中包含我的谷歌地图 v3。

希望这对你有用！

【讨论】：

这对我有用，非常简单和优雅。我尝试了其他解决方案，但我想因为我的设置与上面的示例不同，它不起作用（特别是 resize 方法调用）。但确实如此，谢谢！
我发现使用激活效果更好，而不是显示。我不知道为什么，但 show 似乎冻结了我的标签，并且不允许它再次折叠。

【解决方案9】：

大家好，这段代码修复了错误，但在 IE 中不起作用。经过搜索和搜索，我发现我们必须添加以下行并且一切正常：

< !--[if IE]>
< style type="text/css">
.ui-tabs .ui-tabs-hide { position: relative; }
< /style>
< ![endif]-->

【讨论】：

【解决方案10】：

我也遇到了这个问题，我是通过 AJAX 加载地图的。

百分比的问题似乎与面板没有任何设置大小（包含加载的标记的那个）有关。

在创建标签时使用以下代码对我有很大帮助：

$("#mainTabs").tabs({'show': function(event, ui){
  $(ui.panel).attr('style', 'width:100%;height:100%;');
  return true;
 }});

【讨论】：

【解决方案11】：

你可以打电话

map.fitBounds(边界)

会刷新

【讨论】：

fitBounds() 唯一的问题是，如果您使用标记并且用户拖动地图，地图将重新回到中心。

【解决方案12】：

非常烦人的问题，但通过一些修改是可以解决的。关键是当您选择一个新选项卡时，使相对位置#tabs 调整为每个选项卡的外部高度。我是这样做的：

$('#tabs').tabs({
   selected:0,
   'select': function(event, ui) {
    //this is the href of the tab you're selecting
    var currentTab = $(ui.tab).attr('href');
    //this is the height of the related tab plus a figure on the end to account for padding...
    var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40;
    //now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID
    $('#tabs').css('height', currentInner);
   }
  });

这是我使用的 CSS：

#tabs { position: relative; }
/*set the width here to whatever your column width is*/
.ui-tabs-panel{ position:absolute;top:0px; left:0; width:575px;}
.ui-tabs-panel.ui-tabs-hide { display:block !important; position:absolute;  left:-99999em; top:-9999em}

【讨论】：

【解决方案13】：

我通过Asynchronously loading the API 轻松完成了这项工作，然后简单地从<a> 标记中调用loadScript，该标记与onclick 事件中的相关选项卡相关联，如下所示：

<li><a href="#tab3" onclick="loadScript();">Maps</a></li>

【讨论】：

【解决方案14】：

我遇到了同样的问题，但没有一个答案对我有用。也许我不知道如何在我的代码中使用它们，所以我在选项卡菜单中添加了一个 onclick 事件来初始化 Google 地图并且它正在工作。我不知道这是否是一个好习惯。

jQuery(document).ready(function($) {
$( '#tabs' ).tabs();
var href = $('#tabs').find('a[href="#tabs-4"]');
(href).on('click',function(){
    initialize();
})});
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'),
      mapOptions);
}

<div id="tabs-4">
    <div id="map" style="width:580px;height:380px;">
    </div>
</div>

【讨论】：

【解决方案15】：

Maps API v3 (exp) 和 jQuery UI 1.10 的另一种解决方案：

var pano = new google.maps.StreetViewPanorama(...);

$('#tabs').tabs({
  'activate': function(event, ui) {
    if (ui.newPanel[0].id == "maps-tabs-id") {
      pano.setVisible(true);
    }
  }
});

【讨论】：

【解决方案16】：

我按照 Keith 所说的做了，它对我有用，在我的情况下，我使用 jQuery 航点进行标签式导航，为了更好地理解我使用的代码：

在头部

<head>

<!-- Google Maps -->
<script>
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}
window.onload = loadScript;
</script>

</head>

在我的标签内：

<li><a href="#MyMap" onclick="loadScript();">My Map</a></li>

然后在DIV中

<div id="map_canvas"></div>

希望这对某人有所帮助，谢谢大家！

【讨论】：

【解决方案17】：

我在Semantic UI 中遇到了同样的问题，在加载选项卡时调用init(); 函数时解决了这个问题，或者您也可以绑定它。

【讨论】：