javascript - 异步 AJAX 调用后谷歌地图呈现问题

Question

- 简介

您好，我的类(class)有一个单独的项目，我必须将节日的所有事件放在一个页面上。这是一门 javascript 类(class)，因此大多数任务应使用 javascript 处理。

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

这是我的 HTML 片段

<!-- 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 调用完成后，我必须将事件位置的标记添加到 map 中。同时我还处理获取的 JSON 数据。 完成后，我想删除带有 loading.gif 动画的 div 并显示实际内容。

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

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

这是加载时的 javascript 片段。有两种方法，调用 AJAX 的 loadData() 和初始化 google map 的 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
});

这就是 map 的初始化和渲染方式(currentMap 是一个全局变量，用于保存对 google map 对象的引用)，

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，则 map 窗口无法很好地呈现。当我将其切换为内联(默认浏览器显示样式)时，框中有一个灰色区域并且 map 正在部分呈现。

- 已经尝试过的解决方案

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

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

- 目前最好的解决方案但是

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

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

(启动 = 带有加载 gif 图像和 siteContent = 实际内容的 div)。

这会在显示可见后正确渲染 map 。但是在这里， map - 很遗憾 - 没有以 GPS 位置为中心。 GPS 标记位于左上角。

如果我在 div#siteContent 上不使用 display="none" 显示网站，那么一切都会按预期工作(谷歌地图正确显示，GPS 位置在 map 上居中) .

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

Answer 1

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

(startup = div with the loading gif image and siteContent = actual content).

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

BUT here, the map is - sadly enough - not centered on the GPS position. The GPS marker is at the left upper corner.

那么你应该:

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

Google Maps API

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