如何在多个承诺链中处理Google Maps API V3事件？

Question

我有一个页面加载的设置，如果URL中有一个查询值（？st = CA＆s = park ...“等），javascript使用fetch来获取其中包含一些数据的JSON文件。

在获取的返回承诺上，然后将JSON数据传递给其他3个promises，一个创建一些html，一个创建一些select字段值，最后一个创建一个Google Map。 毕竟，有一个全屏幕覆盖淡出，页面的不同元素（gmaps，选择，html）使用Motion UI系列动画生成动画。

我遇到的问题是如何让Promise.all（[]）。then（）知道google“tilesloaded”事件已被触发。 原因是如果地图在动画发生时仍在渲染，则存在相当数量的抖动，动画并不那么平滑。

基本代码/逻辑看起来像这样，

$(document).ready(function() {

    var query = bsky_GetQueryFromURL(); // gets ?cat=23,43&state=CA
    var data_P = bsky_GetCampaignProjects(); // gets JSON file with fetch

    if (! $.isEmptyObject(query)) {

        data_P
            .then(data => bsky_FilterData(data, query)) // filters data by query
            .then(data => bsky_MakeQueryView(data))
            .then(values => {
                bksy_Animation_QueryView_IN();
            });

    } else {

        bsky_MakeNoQueryView();

    }
});

function bsky_MakeQueryView(data) {
    var gMap_P = bsky_setupGoogleMap(data);
    var pHTML_P = bsky_setupProjectsList(data);
    var selects_P = bsky_setupRefineBySelects(data)

    return Promise.all([gMap_P, pHTML_P, selects_P]);
}

我希望能够知道在我在函数中运行animate之前是否已完成的Google Maps事件，

google.maps.event.addListener(map, "tilesloaded", function() { });

有没有办法通过延期或承诺来做到这一点？

function bsky_setupGoogleMap(subset) {
    var options = {
        scrollwheel: false,
        //navigationControl: false,
        mapTypeControl: false,
        //scaleControl: false,
        //draggable: false,
        zoom: 5,
        center: new google.maps.LatLng(39.8333333,-98.585522),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    var map = new google.maps.Map(document.getElementById('map'), options);
    var bounds = new google.maps.LatLngBounds();
    var markerImage = '';

    $(subset).each(function(k,v) {

        if (v.geo.national == 0) {
            var geo = v.geo.gmap;

            if (geo.hasOwnProperty('lat') && geo.hasOwnProperty('lng')) {
                var lat = parseInt(geo.lat);
                var lng = parseInt(geo.lng);
                var marker = new google.maps.Marker({
                    position: {lat: lat, lng: lng},
                    map: map,
                    title:v.project.title,
                    //icon: markerImage
                });
                var infowindow = new google.maps.InfoWindow({
                    content: bsky_Template_GMapInfoWindow(v),
                    maxWidth: 260
                });

                marker.addListener('click', function() {
                    infowindow.open(map, marker);
                    var iw_container = $(".gm-style-iw").parent();
                    iw_container.stop().hide();
                    iw_container.fadeIn(1000);
                });

                google.maps.event.addListener(map, 'click', function() {
                    infowindow.close();
                });

                google.maps.event.addListener(infowindow, 'domready', function() {

                    var iwOuter = $('.gm-style-iw');
                    var iwBackground = iwOuter.prev();

                    iwOuter.parent().parent().css({left: '135px'});
                    iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 10px !important;'});
                    iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 10px !important;'});

                });

                bounds.extend(marker.getPosition());
            }
        }
    });

    map.fitBounds(bounds);

    var listener = google.maps.event.addListener(map, "idle", function() { 
        if (map.getZoom() > 9) map.setZoom(11); 
            google.maps.event.removeListener(listener); 
    });

    return;
}

也许我有一个答案 - 比我想的更容易？

    function bsky_setupGoogleMaps(data) {
    return new Promise(function(resolve, reject) {
     // ... all the google map code from above
     // then add this and resolve
        google.maps.event.addListener(map, "tilesloaded", function() { 
            resolve('tilesloaded');
        });

    });
}

Answer 1

function bsky_setupGoogleMaps(data) {
    return new Promise(function(resolve, reject) {
        // ... all the google map code from above
        google.maps.event.addListener(map, "tilesloaded", resolve);
    });
}