我正在尝试在我的Phonegap应用程序中使用Google Maps API v3。目前，我可以很好地将地图显示在本地主机上，但当我将其上传到Phonegap构建并尝试在android模拟器上查看时，jquery移动框架无法加载页面。
我不知所措，我看了这里所有的GMap问题，但没有发现任何帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=screen.width, initial-scale=1.0, user-scalable=no" />
<title>DD Buddy App</title>
<link rel="stylesheet" href="themes/ddBuddy.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).on('mobileinit', function () {
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="js/parse-1.2.16.min.js"></script>
<!-- cordova -->
<script src="phonegap.js"></script>
</head>
<body class="site">
<!-- Home/Landing Page -->
<div data-role="page" data-theme="a" id="map">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="maps/jquery.ui.map.js"></script>
<script type="text/javascript" src="maps/jquery.ui.map.services.js"></script>
<div data-role="header" data-position="inline" class="header">
<img src="img/logo.png" title="logo" class="logo" />
<img src="img/home.png" title="home" class="homeImg" />
<img src="img/menu.png" title="menu" class="menuImg" />
</div>
<div class="ui-content ui-page-theme-a" data-form="ui-page-theme-a" data-theme="a" role="main">
<div id="map_canvas" style="width:100%;height:500px;background-color:#CCC;"></div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
<script type="text/javascript">
$(function(){
$("#map_canvas").gmap();
$(".menuImg").on("touchend", function(){
$.mobile.changePage("menu.html", {
transition: 'slide'
});
});
$(".homeImg").on("touchend", function(){
$.mobile.changePage("home.html", {
transition: 'slide'
});
});
});
</script>
</div>
</body>
</html>
在继续之前(我将研究代码)，我建议的第一件事是将所有脚本调用替换为本地调用。我的意思是下载一个jquery手机的副本，并将其存储在您的资产文件夹中，而不是每次从服务器调用它。对于所有的CSS和可以在本地存储的内容都是一样的。别忘了你是在手机上部署的，人们的手机数据可能会有数据上限，所以你想让你的应用程序在数据方面尽可能轻。我会很快更新答案，一旦我在手机上放了一个版本，看看哪里出了问题。
Emil
你的代码很乱，看起来像是一个副本；粘贴甚至没有检查什么。我澄清了一下，它应该更接近这个：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=screen.width, initial-scale=1.0, user-scalable=no" />
<title>DD Buddy App</title>
<link rel="stylesheet" href="themes/ddBuddy.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
<script src="js/parse-1.2.16.min.js"></script>
<script src="phonegap.js"></script>
<!-- cordova -->
</head>
<body class="site">
<!-- Home/Landing Page -->
<div data-role="page" data-theme="a" id="map">
<div data-role="header" data-position="inline" class="header">
<img src="img/logo.png" title="logo" class="logo" />
<img src="img/home.png" title="home" class="homeImg" />
<img src="img/menu.png" title="menu" class="menuImg" />
</div>
<div class="ui-content ui-page-theme-a" data-form="ui-page-theme-a" data-theme="a" role="main">
<div id="map_canvas" style="width:100%;height:500px;background-color:#CCC;"></div>
</div>
<script type="text/javascript">
$(document).on('mobileinit', function () {
$.mobile.defaultPageTransition = 'slide';
});
$(function(){
$("#map_canvas").gmap();
$(".menuImg").on("touchend", function(){
$.mobile.changePage("menu.html", {
transition: 'slide'
});
});
$(".homeImg").on("touchend", function(){
$.mobile.changePage("home.html", {
transition: 'slide'
});
});
});
</script>
</div>
</body>
</html>
注意事项：-确保您的asset/www文件夹中有一个UI文件夹，其中包含jquery.UI.map.js-如前所述，下载一份副本并在本地存储每个JS和CSS的副本，避免每次调用互联网来获取它们-确保删除不必要的库(你在哪里使用parse-js？)
现在，如果你做了所有这些并使用上面的代码，你会在手机上显示地图，我不知道模拟器，因为我从来没有使用模拟器，我使用真实的设备进行测试。