创建和显示多边形之间的延迟答案

【问题标题】：Delay between creation and display of polygons创建和显示多边形之间的延迟
【发布时间】：2013-08-28 18:51:36
【问题描述】：

为了在我的地图中创建多边形，我使用jQuery.getJSON() 来加载包含多边形和多多边形的geojson 文件。然后我使用 github 插件 (loadgeojson) 分析 geojson，最后在地图上创建多边形。

我放了一个带有加载 gif 的 <div>，它覆盖了在调用 jQuery.getJSON() 之前出现的地图。

问题在于删除它的时机。当所有多边形 visible 属性设置为 True 时，我使加载动画消失。

当多边形出现在地图上时，我希望 <div> 消失。但就目前而言，它在此之前消失了一点。因此，在较慢的浏览器上，<div> 消失和多边形出现之间存在相对较大的延迟。

我试图在一个事件上设置一个监听器，但我找不到与我想要的事件相对应的事件。

当多边形出现在我的地图上时，如何及时删除加载动画？

这是我的代码：

function readJSON(id){
    showLoadingAnimation();

    // If .json hasn't been read
    if(stockArray[id].length == 0) {
        $.getJSON(id + ".json", function(data){
        showFeature(data, id)
        })
    }
}

function showFeature(geojson, elemtype){
    currentFeature_or_Features = new GeoJSON(geojson, elemtype, options);
    if (currentFeature_or_Features.type && currentFeature_or_Features.type == "Error"){
        return;
    }
    // Display object
    if (currentFeature_or_Features.length){
        for (var i = 0; i < currentFeature_or_Features.length; i++){
            if(currentFeature_or_Features[i].length){
                for(var j = 0; j < currentFeature_or_Features[i].length; j++){
                    // Display multipolygon
                    currentFeature_or_Features[i][j].setMap(map);
                    // Mouse events for multipolygons
                    mouseEventsMulti(i,j,elemtype);
                }
            }
            else{
                // Display polygons, polylines and points
                currentFeature_or_Features[i].setMap(map);
                // Mouse events for polygons, polylines and points
                mouseEventsSimple(i,elemtype)           
            }
        }
    } else {
        currentFeature_or_Features.setMap(map)
    }

    // Stop loading animation
    dontShowLoadingAnimation();
}

【问题讨论】：

你的代码是什么样的？您可以尝试使用空闲事件来检测多边形何时完成渲染。
我已更新我的问题以包含代码。我已经尝试过空闲事件。地图加载完成时会调用空闲事件。但是当我加载多边形时，加载屏幕永远不会消失（没有调用事件）。

标签： javascript google-maps google-maps-api-3 polygon dom-events

【解决方案1】：

最后，我修改了我的代码，以便在创建多边形后稍微平移地图。然后它激活停止加载动画的空闲侦听器。

这可能不是最漂亮的代码，但它确实有效。

这是我添加到 showFeature 函数中的内容

center = map.getCenter();
latLngCenter = new google.maps.LatLng(center.lat() + 0.0000001,center.lng() + 0.0000001);
map.panTo(latLngCenter);

这就是监听器

google.maps.event.addListener(map, 'idle', function() {
    // Stop loading animation
    dontShowLoadingAnimation();
});

【讨论】：