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

startおよびstopパラメーターを使用して関数を設定できます。 

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 に答える