0

我正在尝试找出一种在谷歌地图处理和呈现 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();

}

4

3 回答 3

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

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

于 2012-12-04T21:46:53.173 回答
0

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

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);
}
});
于 2012-12-04T21:51:00.287 回答
0

你可以试试这个

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);
    }
});
于 2012-12-04T21:54:43.643 回答