Javascript 在jQuery选项卡中加载Google地图

我在将Google地图加载到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 } ?>

下面是侧边栏gmap.php的内容

---

伙计们，求求你们，帮帮我

谷歌地图需要一个可见的固定画布（div）来计算地图的宽度和高度，以便正确显示地图。如果之前隐藏了div，则必须先显示它，然后触发map resize

google.maps.event.trigger（map，“resize”）

在您的例子中，在calculate（）函数中调用resize似乎很理想

function codeAddress() {
   google.maps.event.trigger(map, "resize");

我在jquery选项卡中有一个谷歌地图的工作副本

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

$(document).ready(function() {

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

    //On Click Event
    $("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'});
        return false;
    });
});​
$（文档）.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”）。单击（函数（）{
$（“ul.tabs li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“.tab_content”）.css（{'visibility'：'hidden'，'position'：'absolute'}）；
var activeTab=$（this.find（“a”）.attr（“href”）；
$（activeTab）.css（{'visibility'：'visible'，'position'：'static'}）；
返回false；
});
});​
请记住，这只适用于我在JSFIDLE中显示的div标记，因为我检查了div中的
id
和
class
标记以激活选项卡。我只是将div的可见性更改为hidden或visible

希望这对你有所帮助
 我是这本书的作者

对于其他有相同问题的人：此处的问题取决于您需要在播放动画结束时触发调整大小事件。

您可以通过调用
google.maps.event.trigger（map，“resize”）显示动画结束回调。

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

编辑以下文件：

/* 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();
});

/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();
});

使用此选项：

/* 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();
});


第二部分

查找以下代码：

$(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%确信它会工作。
我在问题中添加的链接中看到了这一点。我试着加上那个，但没用。你能给我更多的信息吗？谢谢你的回复。你能给我你的网址让我看看吗？或者只是在JSFIDLE上做一些工作示例……嘿，Trinh，这里是链接：我在这里添加它是因为我不希望它被google抓取。另外，我在上面的问题中包含了2个php文件。谢谢你的帮助。哦，天哪……这件看起来太棒了。我试图在我的代码中实现它，但现在我得到的只是一个空白页，而不是地图。我不能像在你的代码中那样完全改变它，但仍然在玩代码。你到底用什么来解决这个问题？标记？google.maps.event.addListener？哇，谢谢你，我的朋友。奥布里加多！我感谢你的帮助。我编辑了那个部分，但正如你所看到的，没有任何改变。我仍然将您建议的更改保留在该文件中，但问题仍然存在。嘿，我刚刚更新了我的答案，查看第2部分，我在本地测试了它，它将正常工作；）天哪，这真的很有效。非常感谢你，伙计。遗憾的是，你的网站上没有“买啤酒”按钮，因为你应得的。太神了