Question

我使用Bootstrap创建了一个网站。左侧有一个导航面板。

现在点击导航按钮会执行$('#center_div').load(...)操作以加载其他主要内容。

我的第一个内容以相同的方式加载，它包含一个正确显示的谷歌地图对象。

<div>

    <script>

        (function() {

                var mapCanvas = document.getElementById('map_container');
                console.log(mapCanvas);

                var mapOptions = {
                    center: new google.maps.LatLng(50.10957, 8.679543),
                    zoom: 8,
                    scrollwheel: false,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }

                new google.maps.Map(mapCanvas, mapOptions);

        });

    </script>

<div id="map_container" style="height: 550px"/>

</div>

现在加载其他内容（正在运行）并切换回第一个内容 - ＆gt; map_container显示一个灰色矩形。

同时关注网络流量...... 第一次装零件第二次没有任何事情发生

有什么想法吗？

编辑1

好的，我试着把它解释一下。

我的网站分为工具栏，导航和内容部分。

内容部分将替换为此javascript函数...

Test.loadContent = function (url, success, target, update) {

    console.log('loading ' + url);

    var content = target ? $(target) : $(Test.page);

    var data = {
        updateId: update ? update : content.attr('id')
    };

    content.hide().empty().load(url, data, function (responseText, statusText, xhr) {

        if (xhr.status == 403 || xhr.status == 401) {
            Test.loadContent("/login/auth");
        } else if (xhr.status !== 200) {
            content.html(responseText);
        }

        content.fadeIn(250, function () {

            if (success) {
                success(responseText);
            }

        });

    });

};

Test.map.initMap = function (target) {

    console.log('building Map');

    var mapOptions = {
        center: new google.maps.LatLng(50.10957, 8.679543),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    Test.map.instance = new google.maps.Map(document.getElementById(target), mapOptions);

};

现在我正在使用此功能加载剪切的页面。剪辑看起来像这样

<div>

    <script>

        $(function () {

            var target = $('#map_content');
            target.height(500);

            Test.map.initMap('map_content');

        });

    </script>

    <div id="map_content"></div>

</div>

因此onReady函数会触发地图的实际构建。

第一次一切顺利。但是在加载另一个内容并返回到包含地图的页面后，地图仍然是灰色的。

首次加载：

第二次加载：

google maps API包含在我的标题部分中，在内容刷新期间不会更改。

编辑2

我刚刚注意到，调整浏览器窗口的大小会再次显示地图。

但执行

google.maps.event.trigger(Test.map.instance, "resize");

没有帮助解决问题

Answer 1

所以我终于找到了解决办法：）

我不得不打电话

google.maps.event.trigger(Test.map.instance, "resize");

但是在创建地图后直接调用它并不起作用（可能早到）使用setTimeout（...，1000）工作但不确定。

一个干净的解决方案就是在“空闲”的情况下解雇活动。事件发生了。

google.maps.event.addListener(Test.map.instance, 'idle', function () {
    console.log('idle occured!');
    google.maps.event.trigger(Test.map.instance, "resize");
});

GoogleMaps API替换内容仍然是灰色的

编辑1

编辑2

1 个答案: