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

Question

- 介绍

您好,我的课程有一个单独的项目,我必须将节日的所有活动放在一个页面上.这是一个javascript课程,所以大多数任务应该用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调用完成后,我必须将事件位置的标记添加到地图中.同时我也处理获得的JSON数据.完成后,我想用loading.gif动画删除div并显示实际内容.

这里也是一个图像如何处理数据(初始化地图=读取GPS位置+放置当前位置标记+加载地图);

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

这是加载时的JavaScript代码段.有两种方法,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. 这里 - 结果:我得到的结果与这个问题相同,即灰色区域.但它并没有解决我的问题.
2. 这里 - 结果:没有渲染(框被折叠).
3. 这里 - 结果:与(2)相同.

- 迄今为止的最佳解决方案

到目前为止,我在下一个命令中获得了最好的结果

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

(startup = div,加载gif图像和siteContent =实际内容).

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

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

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

Answer 1

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

(startup = div,加载gif图像和siteContent =实际内容).

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

但是在这里,地图是 - 遗憾的是 - 没有以GPS位置为中心.GPS标记位于左上角.

所以你应该:

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

Google Maps API

最有可能的是,您在地图调整大小之前设置了点中心.调整大小时,只需向右和向下填充空间,中心不会随着地图调整大小而改变.