JQuery面板推送后谷歌地图消失
Posted
技术标签:
【中文标题】JQuery面板推送后谷歌地图消失【英文标题】：Google map disappears after JQuery panel pushes 【发布时间】：2014-03-15 02:21:04 【问题描述】：我在 JQuery Mobile 上使用 Google 地图，当我单击菜单（面板）使其滑动打开时，我遇到了地图消失的问题。
这是我的 JS 函数：
function loadSearch(input)
var mapOptions =
center: new google.maps.LatLng(1.300000,103.800000),
zoom: 11,
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoomControl: false,
panControl:false
;
var map = new google.maps.Map(document.getElementById("content"),
mapOptions);
switch(input)
case 1:
loadOptionsFooter();
break;
case 2:
break;
default:
break;
我已经尝试添加
google.maps.event.addListenerOnce(map, 'idle', function()
google.maps.event.trigger(map, 'resize');
);
但不知何故，它不起作用。感谢是否有人可以帮助我。
谢谢！
编辑：
function loadOptionsFooter()
var output = ['<div data-role="navbar"><ul>'];
output.push('<li><a href="#" data-icon="gear">Filter</a></li>');
output.push('<li><a href="#" data-icon="search">Search</a></li>');
output.push('<li><a href="#" data-icon="navigation">Locate</a></li></ul></div>');
$('[data-role="footer"]').html(output.join('')).trigger('create');
现在它显示了地图，但是通过 ajax 调用创建的菜单被覆盖了
菜单代码如下：
<h6 class="menu-header">MAIN MENU</h6>
<ul data-role="listview">
<li><a href="../search/region.html">Home</a></li>
<li><a href="#">About GeoVid</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<h6 class="menu-header">USER MENU</h6>
<ul data-role="listview">
<li><a href="#">Log In</a></li>
</ul>
HTML 标记如下所示：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page" data-role="page">
<div data-role="panel" data-position-fixed="true" data-display="push" data-theme="a" id="panelLeft">
</div><!-- /panel -->
<header data-role="header" data-position="fixed">
<h1>test</h1>
<a href="#panelLeft" data-icon="bars" class="ui-btn-left" data-iconpos="notext">Menu</a>
<a href="/static/viewer/views/user/login.html" data-icon="user" class="ui-btn-right" data-iconpos="notext">Login</a>
</header>
<div data-role="content" id="alert">
</div>
<div data-role="content" id="content" class="ui-panel-wrapper">
</div>
<footer data-role="footer" data-position="fixed" data-tap-toggle="false">
</footer>
</div>
</body>
</html>
这就是我调用 menu.html 的方式
function loadMenu()
$.get('../../views/common/menu.html', function(data)
var divData = $(data).filter('#defaultMenu')[0];
$('#panelLeft').html(divData).trigger('create');
);
【问题讨论】：
能否展示一下代码的其他部分loadOptionsFooter()，html 页面构建和 CSS 规则如何？
Jquery Mobile Panel hides flexslider when opened 的可能重复项
只需将地图画布包装在一个带有ui-panel-wrapper类的div中。
@Omar 谢谢它解决了问题，但它导致 ajax 创建的侧边菜单被地图覆盖
尝试将所有内容包含在页面中，而不仅仅是地图。页眉、页脚和内容 div。
【参考方案1】：
您的页面结构应如下所示。
<div data-role="page" id="mapPage">
<div id="mapHeader" data-role="header" data-theme="a">
</div>
<div id="mapPageContent" data-role="content">
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
</div>
<footer data-role="footer" data-position="fixed" data-tap-toggle="false">
</footer>
</div>
并确保设置您的 CSS 属性
#mapPageContent, #map-canvas width: 100%; height: 100%; padding: 0;
然后将地图初始化为map-canvas id。
var map = new google.maps.Map(document.getElementById("#map-canva"), mapOptions);
【讨论】：
以上是关于JQuery面板推送后谷歌地图消失的主要内容，如果未能解决你的问题，请参考以下文章
手动设置纬度和经度后谷歌地图不显示（缩放到）当前位置[重复]
谷歌地图 api 长时间加载的 jQuery 移动对话框消失