MapPress简易Google地图在jQuery选项卡中出现问题

时间:2011-08-27 作者:booota

我在自定义主题中使用MapPress Easy Google Map和以下代码:

<?php
   $mymap = new Mappress_Map(array("width" => 600,"height" => 300));
   $mypoi_1 = new Mappress_Poi(array("title" => "DC", "body" => "Beautiful Washington, DC", "point" => array("lat" => 38.90279, "lng" => -77.037849))); 
   $mypoi_2 = new Mappress_Poi(array("address" => "500 chestnut st, phildelphia"));
   $mypoi_2->geocode();
   $mymap->pois = array($mypoi_1, $mypoi_2);
   echo $mymap->display(array("directions"=>"none"));
?>
如果我把这段代码放在主题的任何地方,它会根据需要显示地图。我正在使用jquery选项卡脚本:

jQuery("#property-info .tab_content").hide(); //Hide all content
jQuery("#property-info ul.tabs li:first").addClass("active").show(); //Activate first tab
jQuery("#property-info .tab_content:first").show(); //Show first tab content

//On Click Event
jQuery("#property-info ul.tabs li").click(function() {
    jQuery("#property-info ul.tabs li").removeClass("active"); //Remove any "active" class
    jQuery(this).addClass("active"); //Add "active" class to selected tab
    jQuery("#property-info .tab_content").hide(); //Hide all tab content
    var activeTab = jQuery(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    jQuery(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});
地图的选项卡是第二个。当我点击它时,下面的地图输出如图所示。问题是什么?我需要它尽快。提前感谢您的指导。

Problem Demonstration

2 个回复
最合适的回答,由SO网友:booota 整理而成

在选项卡中使用IFrame是一个很容易解决的问题。我联系了Mappress的作者,他目前正在进行这项工作,下一次更新将使用jquery选项卡(正如他告诉我的那样)。

SO网友:Wyck

不幸的是,这个问题没有简单的解决方法,我不久前亲自尝试过,但最终没有使用任何选项卡进行地图渲染,因为这是唯一可靠的选项。

我在处理CSS方面取得了一些成功,但所有浏览器(和手机)的反应都不同。

原因是谷歌地图计算页面加载的值,这里有一些黑客解决方案。https://stackoverflow.com/questions/1428178/problems-with-google-maps-api-v3-jquery-ui-tabs

结束