5

- 介绍

您好，我的课程有一个单独的项目，我必须将节日的所有事件放在一个页面上。这是一门 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 片段。有两个方法，调用 AJAX的loadData()和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');

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

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

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

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

4

3 回答 3

7 
// 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);

谷歌地图 API

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

于 2013-08-06T22:27:58.857 回答
0

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

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

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

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

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

这样可行！

于 2014-04-06T04:56:15.087 回答
0

从服务器获得 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
    });
});

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

于 2013-08-06T22:11:51.460 回答