我正在使用电话间隙使用谷歌地图。它在我使用 jquerymobile 框架创建的移动网站上运行，但是当我使用 phonegap 在 Eclipse 中复制项目以在模拟器上对其进行测试时，它不起作用。它在实际设备上运行，但在模拟器上不起作用。
代码文件：
配置文件
<access origin="*" subdomains="true"/>
<access origin="google.com"; />
<access origin="maps.google.com"/>
<access origin="google.com"; />
<access origin="maps.google.com*"/>
索引.html
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!-- CSS Style Sheetes -->
<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="icon" href="images/IconTaxi.png" type="image/x-icon">
<!-- JavaScript -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script src="js/cordova.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div class="headerStyle">
<h2 class="headingHeader"><img class="headerImage" src="images/flag.png" alt"United Arab Emirates" / ></h2>
</div>
<div class="logo"></div>
<h1 class="headingImage">Welcome </h1>
<div data-role="content">
<ul data-role="listview" class="mainmenu">
<li><a href="companyList.html">Get Companies</a></li>
<li><a href="#AboutUs">About Us</a></li>
</ul>
</div>
</body>
</html>
在此页面上，当用户打开 userRequest.html 时，我正在显示地图：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="userRequest" data-role="page" >
<div data-role="header" data-position="fixed">
<a href="companyList.html" data-role="button" class="ui-btn-left" data-icon="back" data-inline="true" data-transition="slide" data-theme="e">Back</a>
<h1 id="getComapnyHeader"></h1>
</div>
<div data-role="content" id="requestForm" style="background:none">
<div class="content-primary">
<form id="userOrder">
<div style="padding:10px 0px;">
<label for="userName" class="ui-hidden-accessible">Username:</label>
<input type="text" name="userName" required ="required" id="userName" value="" placeholder="Your Name" required data-theme="e" />
<label for="userPhone" class="ui-hidden-accessible">PhoneNumber:</label>
<input type="tel" name="userPhone" required ="required" id="userPhone" value="" placeholder="PhoneNumber" required data-theme="e" />
</div>
<div id="map"></div>
</form>
</div>
</div>
</body>
</html>
main.js
$(document).ready(function () {
// setup global error handler
window.onerror = function (message, url, lineNumber) {
console.log([lineNumber, url, message].join(" "));
return false;
};
console.log("document.ready");
console.log(window.location.hash);
// start the app
app.init();
});
var app = app || { _timeStart: null };
app.init = function () {
app.Lati = 0;
app.longi = 0;
$('#userRequest').live('pageshow', function(e) { app.getGeoLocation(e); });
});
};
app.getGeoLocation = function(e) {
navigator.geolocation.getCurrentPosition(app.onGeoSuccess, app.onGeoError);
};
app.onGeoError = function(error) {
if(error == 1 )
{
alert("Turn On Geo Location");
}
};
app.onGeoSuccess = function(position)
{
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var currentPosition = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: 12,
center: currentPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: currentPosition,
map: map,
});
app.Lati = lat;
app.longi = lon;
console.log(app.Lati);
};