javascript - 为什么在 chrome "works on firefox"上运行代码时没有出现加载标志？

Question

我有一个函数可以在我的 html 页面中填充谷歌地图，我调用了这个函数

popUpLoadingScreen()
{
    $("#mapLoadingUIId").css("display","block");
}

function dismissLoadingScreen()
{
    $("#mapLoadingUIId").css("display", "none");
}

在 map 上呈现标记但未显示时显示加载消息，当我放置一个断点以了解问题所在时，该标志出现但在正常运行中它没有出现所以我该怎么办知道问题出在哪里吗？

HTML 部分:

<div id="mapLoadingUIId" class="mapLoadingUI">
    Loading...
</div>
<div id="map" class="mapBody"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASTMSvPns7Zclg5dAGYTMQgtwia5nQy0M&callback=initMap"></script>

CSS部分:

.mapLoadingUI {
display:none;
position: fixed;
left: 324px;
top: 48px;
min-width: 1500px;
min-height: 100px;
z-index: 9999;
background-color:#87cefa;
z-index:1000;
text-align:center;
line-height: 100px;
font-family: Arial;
font-size: 14px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
}

调用函数的js:

function renderWells(wells) {
    popUpLoadingScreen();
    //some code to run
    dismissLoadingScreen();
}

Answer 1

可能代码运行速度太快，您看不到消息(它解释了为什么您仍然可以通过放置断点看到它)。还要考虑 map 渲染可能是异步的，并且 renderWells 执行在实际 map 加载之前完成。

查看 gmaps 事件文档并检查您可以处理的可用事件，以确定加载何时完成。

文档:https://developers.google.com/maps/documentation/javascript/events