[英]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.