0

我在将 Google 地图加载到 jQuery 选项卡时遇到问题。我尝试了互联网上的每一个解决方案，使用了这里的建议： Google Maps V3 not loading with jQuery tabs

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

http://www.digitalwks.com/blogs/diogo-raminhos/google-maps-v3-and-jquery-tabs-jquery-tabs-google-maps-bug/

谷歌地图和 jQuery 选项卡

等等...

但是它们都不起作用，要么我太菜鸟而无法使用它们，而且我不知道如何添加它们或者不工作。

选项卡的显示方式如下：

<div class="tabprice">

    <ul class="tabnavig">      
      <?php if ( $gmap_active ) { ?>
          <li><a href="#block2"><span class="big"><?php _e('Map', 'anuncios') ?></span></a></li>
      <?php } ?>
    </ul>

<?php if ( $gmap_active ) { ?>

    <!-- tab 2 -->
    <div id="block2">

        <div class="clr"></div>

            <div class="singletab">

                <?php include_once ( TEMPLATEPATH . '/includes/sidebar-gmap.php' ); ?>

            </div><!-- /singletab -->

    </div>

<?php } ?>

这是sidebar-gmap.php的内容

http://pastebin.com/H3i4J8EN

请各位，我求求你们，帮助我！

4

3 回答 3

4

我是您提到的其中一篇博文的作者。

对于其他有同样问题的人：这里的问题取决于您需要在显示动画结束时触发调整大小事件。

你可以通过调用 google.maps.event.trigger(map, "resize"); 你的显示动画结束回调来做到这一点。

因此，在您的情况下（对于您发送的链接），您需要：

编辑以下文件：

/wp-content/themes/anuncios/includes/js/theme-scripts.js

并替换这个：

/* Tab Control home main */
jQuery(function($) {
    var tabContainers = $('div.tabcontrol > div');
    tabContainers.hide().filter(':first').show();
    $('div.tabcontrol ul.tabnavig a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).fadeIn(100);
        $('div.tabcontrol ul.tabnavig a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});

有了这个：

/* Tab Control home main */
jQuery(function($) {
    var tabContainers = $('div.tabcontrol > div');
    tabContainers.hide().filter(':first').show();
    $('div.tabcontrol ul.tabnavig a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).fadeIn(100, function(){
            if(map != undefined && map != null)
                google.maps.event.trigger(map, "resize");
        });
        $('div.tabcontrol ul.tabnavig a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});

第2部分

找到以下代码：

$(tabs).click(function() {
    // hide all tabs
    $(tabContainers).hide().filter(this.hash).fadeIn(500);
    $(tabs).removeClass('selected');
    $(this).addClass('selected');
    return false;
});

并将其替换为

$(tabs).click(function() {
    // hide all tabs
    $(tabContainers).hide().filter(this.hash).fadeIn(500, function(){
        if(map != undefined && map != null)
            google.maps.event.trigger(map, "resize");
    });
    $(tabs).removeClass('selected');
    $(this).addClass('selected');
    return false;
});

您的错误将得到修复，这次我在本地下载并测试了它，所以我 100% 确定它会起作用。

于 2012-08-06T10:14:35.717 回答
3

谷歌地图需要一个可见且固定的画布（div）来计算地图的宽度和高度，以便正确显示。如果你之前隐藏了你的 div，你必须先显示它然后触发 map resize google.maps.event.trigger(map, "resize");。

在您的情况下，在 calculate() 函数中调用 resize 似乎很理想

function codeAddress() {
   google.maps.event.trigger(map, "resize");
于 2012-08-05T18:49:21.903 回答
1

我在http://jsfiddle.net/X5r8r/529/的 jquery 选项卡中有一份谷歌地图的工作副本

我使用了您上面列出的来源中的一些代码。这是执行此操作的代码。其他东西只是地图的东西不太重要

$(文档).ready(函数() {

    //默认动作
    $(".tab_content").css({'visibility':'hidden', 'position':'absolute'});
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").css({'visibility':'visible' , 'position':'static'});

    //点击事件
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").css({'visibility':'hidden', 'position':'absolute'});
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).css({'visibility':'visible' , 'position':'static'});
        返回假；
    });
});​

请记住，这仅适用于我在 jsfiddle 中显示的 div 标签，因为我检查了div 中的idandclass标签以激活选项卡。我只是基本上将 div 的可见性更改为隐藏或可见。

希望这可以帮助你。

于 2012-08-05T18:56:43.703 回答