簡體   English   中英

如何在多個承諾鏈中處理Google Maps API V3事件?

[英]How to handle Google Maps API V3 event in multiple promise chain?

我有一個頁面加載的設置,如果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');
        });

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM