带有 jQuery 选项卡的 Google Map API

【问题标题】：Google Map API with jQuery tab带有 jQuery 选项卡的 Google Map API
【发布时间】：2014-03-01 07:10:50
【问题描述】：

我正在使用 jQuery 选项卡实现 Google 地图，但没有得到正确的显示。

我已尝试使用此代码在单击选项卡 ID 时重新居中地图。

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        jQuery("#tab6").click(function() {
            google.maps.event.trigger('location-canvas', 'resize');
            map.setCenter(bounds.getCenter());
            map.setZoom(16);
        });
    }); 
</script>

但是没有用。

我正在使用这个标签脚本：Simple jQuery Responsive Tabs Interface Plugin - jQueryTab

我的 JSFiddle 是：Code

如果您能指导我并帮助我解决此问题，我将不胜感激。

谢谢。

【问题讨论】：

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

【解决方案1】：

您触发'location-canvas' 的事件，这只是一个字符串，您必须提供google.maps.Map-instance 作为参数

触发resize-event onclick可能为时过早，改用插件的after-method。

after: function(){if($(this).text()==='Google Map'){ 
    //map must be the google.maps.Map-instance and available here
    center=map.getCenter();
    google.maps.event.trigger(map,'resize');
    map.setCenter(center);                                             
}}

演示：http://jsfiddle.net/doktormolle/xzVpW/

注意：map-变量在 after-method 中不可用。在我修改过的小提琴中，我将实例存储在 $('#location-canvas').data

【讨论】：

非常感谢您的大力帮助。 :)