使用phonegap的google api不显示地图以及纬度和经度 [英] google api using phonegap not showing map and latitude and longitude
问题描述
我正在通过Phone Gap使用Google Maps.它可以在我使用jquerymobile框架创建的移动网站上运行，但是当我使用phonegap在Eclipse中复制项目以在模拟器上对其进行测试时，它无法正常工作.它只能在实际设备上运行，而不能在模拟器上运行.
I am using Google Maps using Phone Gap. It's working on a mobile website that I have created using jquerymobile framework, but when I copy the project in Eclipse using phonegap to test it on the emulator it does not work.its working on actual device but not working on emulator.
代码文件:
config.xml
config.xml
<access origin="*" subdomains="true"/>
<access origin="google.com"; />
<access origin="maps.google.com"/>
<access origin="google.com"; />
<access origin="maps.google.com*"/>
index.html
index.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时，我正在显示地图:
On this page I am showing map when user switch on 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);
};
推荐答案
奇怪的是，您可能没有正确将其列入白名单.
Odds are you're probably not whitelisting correctly.
乍一看，您似乎需要列入白名单:
From a quick glance it looks like you need to be whitelisting:
- code.jquery.com
- 与Google地图有关的项目.
老实说，您应该真正下载jQuery并将其放在本地，而不是尝试从CDN检索它.
Honestly you should really download the jQuery and have it locally rather than trying to retrieve it from the CDN.
Google Maps项可能有些棘手，因为它具有很多依赖性.可能有效的列表是:
The google maps items can be a little tricky since it has a lot of dependencies. A list that might work is:
- *.google.com
- *.googleapis.com
- *.gstatic.com
这篇关于使用phonegap的google api不显示地图以及纬度和经度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
