谷歌地图 api 长时间加载的 jQuery 移动对话框消失

Posted 2023-05-09

【中文标题】谷歌地图 api 长时间加载的 jQuery 移动对话框消失

【英文标题】：jQuery mobile dialog disappears for google maps api long loads

【发布时间】：2016-02-27 06:45:50

【问题描述】：

当 Google Maps API 加载时间过长时，我在 jQuery Mobile 中使用的伪启动页面（它是加载时以编程方式打开的对话框）时遇到问题。

实际上发生的事情是，当谷歌地图需要一段时间才能完成加载时，jQuery Mobile 对话框窗口消失了，url 仍然显示 #&ui-state=dialog 就好像它仍然打开一样，所以它没有关闭它，只是让它消失了。

我尝试了很多方法，但我不确定如何解决或防止它。

$("#map_canvas").ready(function() 

    var myOptions = 
        zoom: 13,
        center:latLngVar,
        mapTypeId:google.maps.MapTypeId.ROADMAP,
        disableDefaultUI:true,
        zoomControlOptions: position:google.maps.ControlPosition.LEFT_TOP 
    ;

    if(firstShow)

        var winHeight = $(window).height();
        var winWidth = $(window).width();
        var oMod = winHeight/winWidth;
        if ( oMod <= 1 )
            renderLandscape(winHeight,winWidth);
        else if( oMod > 1 )
            renderPortrait(winHeight,winWidth);
        
        drawMap(myOptions);
    

    showHomeScreen();

    splashListener = google.maps.event.addListener(map, "idle", function()
        setTimeout(function()$("#dlgSplash").click(), 500);
        google.maps.event.removeListener(splashListener);
    )

    firstShow = false;
);

在html中是这样的锚标记

<a href="splash.php" data-prefetch data-rel="dialog" id="dlgSplash" style="display: none;"></a>

【问题讨论】：

请提供一个Minimal, Complete, Tested and Readable example 来证明该问题。

抱歉，代码已添加。

【参考方案1】：

您能否发布用于显示 jQuery Mobile 对话框并关闭它的代码？以下内容应该有助于实现您的目标：

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
<script type='text/javascript'>

$(function() 
    $("#dialog").popup("open");
);

function initMap() 
    map = new google.maps.Map(document.getElementById('map'), 
        center: lat: -34.397, lng: 150.644,
        zoom: 8
    );
    $("#dialog").popup("close");


</script>

【讨论】：

这似乎允许我以编程方式关闭对话框，但我试图阻止这种情况，因为当我不希望它时它似乎正在消失。