jQuery Mobile 和 Google Maps API - 地图未加载到设备上
Posted
技术标签:
【中文标题】jQuery Mobile 和 Google Maps API - 地图未加载到设备上【英文标题】：jQuery Mobile and Google Maps API - Map not loading on device 【发布时间】：2014-01-06 22:51:57 【问题描述】：我正在构建一个移动应用程序，它是一个活动程序。我想链接到在谷歌地图上显示活动位置的页面，但不知道如何让它工作。
当您直接链接到页面（或重新加载页面）时，它会在浏览器和设备上正常加载，但是当我通过应用程序访问页面时，地图不会出现。我很确定这与通过 ajax 加载的页面有关。
任何帮助将不胜感激。
我已经尝试了一些东西，但这是我当前的代码：
<!doctype html>
<html class="">
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<link href="css/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet">
<style>
html, body, #map-canvas
margin: 0;
padding: 0;
height: 100%;
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$(document).on("pageinit", "#map", function()
initialize();
);
var map;
function initialize()
var mapOptions =
zoom: 17,
center: new google.maps.LatLng(-27.617745,153.086779),
mapTypeControl: false,
zoomControl: false,
panControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.SATELLITE
;
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
</script>
</head>
<body>
<div data-role="page" id="map">
<div id="header" data-role="header">
<a href="#" data-rel="back" >< Back</a>
</div>
<div data-role="content">
<div id="map-content">
<div id="map-canvas"></div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
将JS代码和google.js放入data-role="page"。
How can I display a full screen google map with jQuery Mobile?的可能重复
@dr.molle 这是一个不同的问题。地图根本没有加载。
同样的问题，地图正在加载，但是看不到地图，因为#map-canvas的计算高度是0px
OP中的页面是通过ajax加载的。 JQM 会忽略data-role=page 之外的任何标记，因此不会执行 js 代码，也不会加载 js 库。当强制刷新时，它可以工作。 @Dr.Molle
【参考方案1】：
您是否尝试过使用页面创建事件而不是 pageinit 事件？
$(document).on("pagecreate", "#map", function()
initialize();
);
【讨论】：
以上是关于jQuery Mobile 和 Google Maps API - 地图未加载到设备上的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile 和 Google Maps API - 地图未加载到设备上
Google maps v3 在 jQuery mobile 和 PhoneGap 上具有自动完成功能
jquery-ui-map 与新版本的 jquery mobile 和 jquery
在显示 jQuery Mobile 页面之前让 Google 地图正确加载