Question

我正试图找出一种方法来运行进度加载器，同时谷歌地图处理并渲染kml。

我有一个status_changed的监听器设置。

google.maps.event.addListener(kmllayer, "status_changed", function() {
    var kmlstatus = kmllayer.getStatus();
    if (kmlstatus != 'OK') {
        $('kmllayerlist').append($('<div class="kmllayeritem">Error Loading KML' + kmlstatus +'</div>'));
    } else {
        var itemhostname = kmllayerURL.split("/");
        $('#kmllayerlist').append($('<div class="kmllayeritem"><input type="checkbox" class="kmllayerchx" CHECKED><img src="http://www.google.com/s2/favicons?domain='+itemhostname[2]+'" class="kmllisticon" alt="kmlurlicon">'+itemhostname[(itemhostname.length - 1)]+'</input></div>'));
        kmllayerarr.push(kmllayerURL);
    }
});

在触发侦听器之前，如何运行函数？我在想下面的内容，但是我不能想到打破while语句的好条件。

while () {
  //function to run until listener fires
}

工作代码块

function addkmlLayer_m(kmllayerURL) {
kmllayer = new google.maps.KmlLayer(kmllayerURL, {
    preserveViewport: true
});
kmllayer.setMap(map);
var itemhostname = kmllayerURL.split("/");
var kmlstatus_boo;
function kmlProgress() {
    if (kmlstatus_boo != 'done') {
        google.maps.event.addListener(kmllayer, "status_changed", function() {
            kmlstatus_boo = 'done';
            $('#progress').remove();
            kmlstatus = kmllayer.getStatus();
            if (kmlstatus != 'OK') {
                $('#kmllayerlist').append($('<div id="kmllayeritem_error" class="kmllayeritem">Error Loading KML ' + kmlstatus +'<input class="kmldel" type="image" src="../images/delete.png" name="delete kml" OnClick="delkmlerr();" /></div>'));
            } else {
                kmllayerarr.push(kmllayer);

                $('#kmllayerlist').append($('<div id="kmllayeritem_'+kmllayerarr.length+'" class="kmllayeritem"><input type="checkbox" class="kmllayerchx" CHECKED><img src="http://www.google.com/s2/favicons?domain='+itemhostname[2]+'" class="kmllisticon" alt="kmlurlicon">'+itemhostname[(itemhostname.length - 1)]+'</input><input class="kmldel" type="image" src="../images/delete.png" name="delete kml" OnClick="delkmlitem('+kmllayerarr.length+');" /></div>'));
            }
        });
        $('#kmllayerlist').append($('<div/>', {'id':'progress','class':'kmllayeritem','text':'Loading '+itemhostname[(itemhostname.length - 1)]+' KML'}));
        kmlstatus_boo = null; // free the closure
    } else {
        window.setInterval(kmlProgress,400); // Run again in 400ms changed so the user actually sees the loading image.
    }
}
kmlProgress();

}

Answer 1

不幸的是，如果你运行这样的while循环，等待侦听器触发，它将永远不会发生。 Javascript是单线程的。因此，您需要放弃浏览器的时间，以便它可以完成其工作。尝试以下几点：

var myRelevantValue = "something";
function myTimer() {
    if (myRelevantValue == "done") {
        // It changed.
        myRelevantValue = null; // free the closure
    } else {
        // Update progress bar
        window.setInterval(myTimer,100); // Run again in 100ms
    }
}
window.setInterval(myTimer,100); // Run in 100ms

在你的监听器中，将变量的值设置为有用的值，这个计时器会在它发生时捕获它。

Answer 2

您可以使用启动和停止参数设置功能。

function progressLoader(status){
    if(status == 'start'){
        //show progress bar
    }
    if(status == 'stop'){
       //hide progress bar
    }
}

然后只是

google.maps.event.addListener(kmllayer, "status_changed", function() {
var kmlstatus = kmllayer.getStatus();
if (kmlstatus != 'OK') {
    progressLoader(start);
    $('kmllayerlist').append($('<div class="kmllayeritem">Error Loading KML' + kmlstatus +'</div>'));
} else {
    var itemhostname = kmllayerURL.split("/");
    $('#kmllayerlist').append($('<div class="kmllayeritem"><input type="checkbox" class="kmllayerchx" CHECKED><img src="http://www.google.com/s2/favicons?domain='+itemhostname[2]+'" class="kmllisticon" alt="kmlurlicon">'+itemhostname[(itemhostname.length - 1)]+'</input></div>'));
    kmllayerarr.push(kmllayerURL);
    progressLoader(stop);
}
});

Answer 3

你可以试试这个

google.maps.event.addListener(kmllayer, "status_changed", function() {
    $('kmllayerlist').append($('<div/>', {'id':'progress','text':'Loading...', 'style':'color:black;font-weight:bold'})); // style can be changed
    var kmlstatus = kmllayer.getStatus();
    if (kmlstatus != 'OK')
    {
        $('#progress').remove();
        $('kmllayerlist').append($('<div class="kmllayeritem">Error Loading KML' + kmlstatus +'</div>'));
    } 
    else
    {
        var itemhostname = kmllayerURL.split("/");
        $('#progress').remove();
        $('#kmllayerlist').append($('<div class="kmllayeritem"><input type="checkbox" class="kmllayerchx" CHECKED><img src="http://www.google.com/s2/favicons?domain='+itemhostname[2]+'" class="kmllisticon" alt="kmlurlicon">'+itemhostname[(itemhostname.length - 1)]+'</input></div>'));
        kmllayerarr.push(kmllayerURL);
    }
});

谷歌地图功能在听众之前

3 个答案: