谷歌地图不适用于 jquery 移动框架答案

【问题标题】：Google Maps not working on jquery mobile framework谷歌地图不适用于 jquery 移动框架
【发布时间】：2017-03-17 00:30:55
【问题描述】：

Google 地图在我的 phonegap 应用程序中无法在 jquery mobile 上运行。但是当我在不使用 JQM 的情况下运行相同的代码时，它正在工作......告诉我在下面的代码中我做错了什么

HTML

<body onload="onLoad()">
    <div data-role="page">

        <div data-role="header">
            <h1>Welcome To My Homepage</h1>
        </div>

        <div data-role="main" class="ui-content">
            <div id="map-canvas"></div>
        </div>

        <div data-role="footer" data-position="fixed">
            <h1>Footer Text</h1>
        </div>
    </div>
</body>

请参考这里的完整代码 https://jsbin.com/fanixajebi/1/edit?html,css,js,output

【问题讨论】：

标签： javascript jquery cordova jquery-mobile

【解决方案1】：

我认为你需要给你的数据角色页面一个 id

然后使用框架的事件来初始化页面。并给出以 px 为单位的高度大小，而不是 %

例如：

<div id="home" data-role="page">

$(document).on('pagebeforeshow', "#home", function(event) {    /*  pagebeforeshow  */       
  setTimeout("initialize()",100);
});

【讨论】：