Question

我有三天关于谷歌地图的问题。我想使用jQuery动态加载页面中的地图。这是代码：在左侧页面中，将页面加载到右侧的脚本：

<script type="text/javascript">
    $(document).ready(
    function () {
        $("a").each(
        function(){
            var ajaxOptions = {};
            $(this).click(function() {
                if (this.className != "notLoad") {
                $("#page").load(this.href, {'idtracker':getTracker()});
                return false;
            }
            });
        });
    }
);
    function getTracker(){
        return $("#idtracker option:selected")[0].value;
    }
</script>

在右侧页面：

<?php
$content .= '<script type="text/javascript">' . "\n";
$content .= "\t" . 'function initialize() {' . "\n";
$content .= "\t" . 'var myLatlng = new google.maps.LatLng(6.125,1.154 );' . "\n";
$content .= "\t" . 'var myOptions = {' . "\n";
$content .= "\t\t" . 'zoom: 8,' . "\n";
$content .= "\t\t" . 'center: myLatlng,' . "\n";
$content .= "\t\t" . 'mapTypeId: google.maps.MapTypeId.' . $this->mapTypeId . "\n";
$content .= "\t" . '}' . "\n";
$content .= "\t" . 'map = new google.maps.Map(document.getElementById("map"), myOptions);' . "\n";
$content .= '}' . "\n";

$content .= "\t" . 'function loadMaps() {' . "\n";
$content .= "\t" . ' google.load("maps", "3", {"other_params":"sensor=false", "callback" : initialize});' . "\n";
$content .= "\t" . '}' . "\n";

$content .= "\t" . 'function initLoader() {' . "\n";
$content .= "\t" . 'var script = document . createElement("script");' . "\n";
$content .= "\t" . 'script.type = "text/javascript";' . "\n";
$content .= "\t" . 'script.src = "https://www.google.com/jsapi?async=2&callback=loadMaps";' . "\n";
$content .= "\t" . 'document.getElementsByTagName("head")[0].appendChild(script);' . "\n";
$content .= "\t" . '}' . "\n";
$content .= "\t" . 'window.onload=initLoader();' . "\n";
$content .= '</script>' . "\n";
print $content;
?>
<div id="map"></div>

当我在没有ajax（通过其url）的情况下调用右侧页面时，我会完全显示地图，但在使用ajax时，地图未完全显示。拜托，我需要你的帮助！

我为提供的信息不完整而道歉。事实上，地图发布在第二个不是主要标签的标签中。所以，我不明白jquery是如何做到的，但当我打开地图标签时，卡片显示为三分之一。今天早上，通过前景中的地图选项卡（默认打开），我意识到地图完全显示。我现在绞尽脑汁找到这个jquery标签的奇怪问题！谢谢！

Answer 1

当我在jquery弹出窗口中加载地图时，我遇到了类似的问题。显示弹出窗口后，我执行了以下操作：

google.maps.event.trigger(map, "resize");
map.setOptions(mapOptions);

Answer 2

我在这里找到答案：http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

任何需要进行初始化计算以进行初始化的组件都不能在隐藏选项卡中工作，因为选项卡面板本身是通过display：none隐藏的，因此内部的任何元素都不会报告它们的实际宽度和高度（0 in大多数浏览器）。

有一个简单的解决方法。使用左侧技术隐藏非活动选项卡面板。例如。在样式表中用

替换类选择器“.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 Maps的checkResize（）。感谢您的贡献！

使用ajax时，Google Map不会完全显示

2 个答案: