Google Map API в Javascript: как динамически установить SetCenter в два слоя для цикла

Question

function start()
{
    var lastcenter = map.getCenter();
    for(var i = 0;i<2/*18937*/;i++)
    {   
        var run = lastcenter;
        var lat = run.lat()-(0.00018*i);
        var lng = run.lng();
        for(var j = 0;j<3/*11276*/;j++) 
        {   
            var rlng = lng+(0.00018*j);     
            run = {lat:lat,lng:rlng};
            map.setCenter(run);
            PrintMap();

        }

    }

}

** Я пытаюсь вырезать много маленьких квадратов из карты Google ， и хочу установить центр для посещения каждого квадрата и захватить их, но программа установит центр в последней точке и вырезать много квадратов для последней точки ， Как я могу это исправить .. .. демо: https://jsfiddle.net/awalker0215/u0s9kna1/1/ **

Answer 1

И html2canvas, и setCenter являются асинхронными. Таким образом, ваш код должен «подождать», пока один вызов не будет завершен, а затем продолжить работу.

Это может выглядеть примерно так

<input type="button" value="startCut" onclick="moveMap()">

и

var i = 0, n = 3;

function moveMap()
{
    google.maps.event.addListenerOnce(map, 'idle', function() {
        printMap();
    })

    map.setCenter({lat: map.getCenter().lat() - 0.1, lng: map.getCenter().lng() - 0.1});
}

function printMap() 
{           
    html2canvas(document.getElementById("map"), 
    {
        useCORS: true,
        onrendered: function(canvas) 
        {
            document.body.appendChild(canvas);
            document.body.appendChild(document.createElement("br"))

            i++;

            if (i < n) {
                moveMap();
            } else {
                google.maps.event.clearListeners(map, 'idle');
            }
        }
    })
}

Проблема в этом случае в том, что карта иногда простаивает, но плитки все еще загружаются (обратите внимание на последнее изображение). Так что было бы лучше использовать тайм-аут.

var i = 0, n = 3;

function moveMap()
{
    map.setCenter({lat: map.getCenter().lat() - 0.1, lng: map.getCenter().lng() - 0.1});

    setTimeout(function() {
        printMap();
    }, 200);
}

function printMap() 
{           
    html2canvas(document.getElementById("map"), 
    {
        useCORS: true,
        onrendered: function(canvas) 
        {
            document.body.appendChild(canvas);
            document.body.appendChild(document.createElement("br"))

            i++;

            if (i < n) {
                moveMap();
            }
        }
    })
}