代码在Phonegap应用程序上不起作用
[英]Code not working on Phonegap Application
问题描述
Currently I am working on Phonegap , I have found a sample code for which I want to make it work for Phonegap but I could't . 
目前，我正在研究Phonegap，我已经找到了一个示例代码，想要使其适用于Phonegap，但我不能。 One more thing I want to mention that here Jquery MObile 1.2.0 is used but I want to use Jquery mobile 1.3.2 and JQuery 2.1.1 ,cordova-3.4.0 我想提一件事，这里使用了Jquery MObile 1.2.0，但我想使用Jquery mobile 1.3.2和JQuery 2.1.1，cordova-3.4.0
Any help will be apreciated .Thanks in advance . 任何帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageinit', '#index',function(e,data){
var minZoomLevel = 12;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</html>
4 个解决方案
解决方案1
0 2014-06-11 10:06:02
That means ur HTML can't detect the PLATFORM of mobile 这意味着您的HTML无法检测到移动平台
To detect the operating system on the client machine, your script can analyze the value of navigator.appVersion or navigator.userAgent. 要检测客户端计算机上的操作系统，您的脚本可以分析navigator.appVersion或navigator.userAgent的值。 Below is a simple example of a script that sets the variable OSName to reflect the actual client OS. 下面是一个简单的脚本示例，该脚本将变量OSName设置为反映实际的客户端OS。
// This script sets OSName variable as follows:
// "Windows" for all versions of Windows
// "MacOS" for all versions of Macintosh OS
// "Linux" for all versions of Linux
// "UNIX" for all other UNIX flavors
// "Unknown OS" indicates failure to detect the OS
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
document.write('Your OS: '+OSName);
解决方案2
0 已采纳 2014-06-11 10:12:38
Reason for this code not working is that you are missing jQuery library. 该代码无法正常工作的原因是您缺少jQuery库。 jQuery Mobile can't work without jQuery. 没有jQuery，jQuery Mobile就无法工作。
That's why you're receiving this error: 这就是为什么您收到此错误的原因：
"Uncaught TypeError: Cannot read property 'mobile' of undefined", source: code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js (2) AND on Android device screen I am getting "First Page" two times in vertical order but there is no map .
解决方案3
0 2014-06-11 10:12:38
<script language="JavaScript">
var platform = navigator.platform.substr(0,3);
</script>
解决方案4
0
Now working code for Phonegap Application is :: 现在，Phonegap应用程序的工作代码为::
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="file:///android_asset/www/js/jquerymobile/jquery-1.8.3.js"> </script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
</style>
<script>
$(document).on('pageinit', '#index',function(e,data){
var minZoomLevel = 12;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</htm
l> L>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.