异步 AJAX 调用后的谷歌地图渲染问题

Question

- 简介

您好，我的课程有一个单独的项目，我必须将节日的所有事件放在一个页面上。这是一门javascript课程，所以大部分任务都应该用javascript来处理。

问题是，为了提供一个好的网站，我正在使用一个加载 gif 文件，其中包含一条消息，用户必须等待来自 AJAX 的数据被获取和处理。

这是我的 HTML sn-p

<!-- showing loading screen -->
<div id="startup">
    <h3>Please wait until the data is done with loading</h3>
    <img src="images/ajax_load.gif" alt="loading icon" id="load_icon" />
</div>
<!-- actual content (will be displayed after loading phase) -->
<div id="siteContent">
    <div id="top">
        <label><input type="checkbox" name="cbDisabilities" id="cbDisabilities">Accessible for disabilities</label>
        <label><input type="checkbox" name="cbFree" id="cbFree">for free</label>
        <select id="selectCat">
            <option selected="selected">&nbsp;</option>
        </select>
    </div>
    <div id="mapBox"></div>
    <div id="dateBox" class="layout"></div>
    <div id="eventBox" class="layout borders"></div>
</div>
<footer>
    <p>Gentse Feesten Infos &ndash; &copy; name here TODO</p>
</footer>

有了以上内容，我还有两个 div 的下一个 CSS，

div#siteContent {
    display: none;
}
/* style google map box */
div#mapBox {
    display: block;
    height : 500px;
    width : 500px;
    margin-top : 5px;
}

如您所见，实际内容是隐藏的，因此带有 h3 文本的加载图像仅可见。现在，当 AJAX 调用完成后，我必须将事件位置的标记添加到地图中。同时我还处理获得的 JSON 数据。 完成后，我想删除带有 loading.gif 动画的 div 并显示实际内容。

这也是如何处理数据的图像（初始化地图 = 读取 GPS 位置 + 放置当前位置标记 + 加载地图）；

我必须在 AJAX 调用完成之前初始化地图，因为我在处理数据时必须向地图添加多个标记。没有地图，添加谷歌地图标记时会出错。

这是加载时的 javascript sn-p。有两种方法，loadData() 调用 AJAX 和 placeMap(currentLocation) 来初始化谷歌地图。

window.addEventListener('load', function() {

    // get json data - going to call AJAX
    loadData();

    // getting current location by geocoder
    var getGeoLocation = new google.maps.Geocoder();
    var currentPosition;

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
            placeMap(currentPosition);
        }, function() {
            handleError(100);
        });
    }
    else {
    handleError(200);
    }
    // other tasks omitted
});

这就是地图的初始化和渲染方式（currentMap 是一个全局变量，用于保存对谷歌地图对象的引用），

var placeMap = function(location) {
    var mapOptions = {
        zoom : 18,
        center : location,
        disableDefaultUI : true, // remove UI
        scaleControl : true,
        zoomControl : true,
        panControl : true,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    currentMap = new google.maps.Map($("mapBox"), mapOptions);
    // current position
    var mapMarker = new google.maps.Marker({
        position : location,
        map : currentMap,
        zIndex : 255
    });
    google.maps.event.addListenerOnce(currentMap, 'idle', setActive);
}

- 我的问题

但我的问题是，如果我在加载时使用 display:none，则地图窗口无法很好地呈现。当我将其切换为内联（默认浏览器显示样式）时，框中有一个灰色区域，并且地图正在部分呈现。

- 已经尝试过的解决方案

我已经尝试过这个网站上的解决方案；

1. here - 结果：我得到与这个提问者相同的显示结果，那个灰色区域。但这并没有解决我的问题。
2. here - 结果：无渲染（框已折叠）。
3. here - 结果：与 (2) 相同。

- 迄今为止最好的解决方案，但是

到目前为止，我使用下一个命令得到了最好的结果

// display content
$("startup").style.display = "none";
$("siteContent").style.display = "inline";
google.maps.event.trigger(currentMap, 'resize');

（启动 = 加载 gif 图像的 div 和 siteContent = 实际内容）。

这会在显示可见后正确呈现地图。但是在这里，地图 - 可悲的是 - 没有以 GPS 位置为中心。 GPS 标记位于左上角。

如果我在 div#siteContent 上显示站点而不使用 display="none"，那么一切都按预期工作（谷歌地图正确显示，GPS 位置以地图为中心） .

有人知道如何解决这个小渲染问题吗？最好不使用 jQuery。

Answer 1

您可以在从服务器获得 AJAX 响应后创建地图。我不知道你是如何发出 AJAX 请求的，下面是简单的例子（没有 jquery）：

function loadData(callback) {
    var oReq = new XMLHttpRequest();
    oReq.open("GET", '/some/url', true);
    oReq.onload = callback;
    oReq.send();
}

此函数接受将在 AJAX 请求完成后执行的回调。然后你的代码：

window.addEventListener('load', function() {

    // get json data - going to call AJAX
    loadData(function(oReq) {
        var response = oReq.response;
        // parse ajax response .... (code omitted)


        // getting current location by geocoder
        var getGeoLocation = new google.maps.Geocoder();
        var currentPosition;

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                // Now you can hide loading gif show your site content
                document.getElementById('startup').style.display = 'none';
                document.getElementById('siteContent').style.display = 'block';

                // Create map.
                placeMap(currentPosition);

                // .... add markers here.

            }, function() {
                handleError(100);
            });
        }
        else {
        handleError(200);
        }
        // other tasks omitted
    });
});

更好的解决方案是使用自定义叠加层在地图正上方显示加载小部件。

Answer 2

// display content
$("startup").style.display = "none";
$("siteContent").style.display = "inline";
google.maps.event.trigger(currentMap, 'resize');

（启动 = 加载 gif 图像的 div 和 siteContent = 实际内容）。

看来你现在唯一的问题是？：

但在这里，地图 - 可悲的是 - 没有以 GPS 位置为中心。 GPS 标记位于左上角。

那么你应该：

google.maps.event.trigger(currentMap, 'resize');
currentMap.setCenter(location);

Google Maps API

您很可能在地图调整大小之前设置点中心。当它调整大小时，它只是向右和向下填充空间，中心不会随着地图调整大小而改变。

Answer 3

我不会说西班牙语，但仍然理解这个答案，并且因为它纠正了我的脚本中的错误，我会尝试在这里翻译它并希望能有所帮助：

---

我危险地发现了这个问题的解决方案。我创建了一个名为 Mapa() 的函数来初始化谷歌地图。就我而言，我只使用 ajax 并动态加载信息。

1) 添加调整大小事件： google.maps.event.trigger(currentMap, 'resize');

2) 使用 jquery onload 执行 Mapa 函数（还不行）

3) 我在 1 秒后开始执行该函数，然后是 less、less and ... 它在 0 毫秒时完美运行，所以这里是解决方案： setTimeout(Mapa,0);

行得通！