在 phonegap 中应用地理位置不起作用
Posted
技术标签:
【中文标题】在 phonegap 中应用地理位置不起作用【英文标题】：Applying geolocation in phonegap doesn't work 【发布时间】：2019-07-14 14:11:39 【问题描述】：我对此很陌生，目前正在开发我的第一个应用程序（用于学校项目）。我遵循了这个https://www.w3.org/TR/geolocation-API/ 教程。当我在浏览器（在电脑上）中打开项目时，它会给出坐标，但一旦在我的手机上安装（虽然 phonegap）似乎什么都没有发生。此外，谷歌地图的实施似乎不起作用（也不是在电脑上）。你们中的任何人都可以帮助我或将我重定向到易于遵循的指南吗？
这些也是我查看的来源：
https://demos.jquerymobile.com/1.4.5/map-geolocation/
https://www.w3.org/TR/geolocation-API/
https://forum.jquery.com/topic/jquery-mobile-activating-geolocation-on-mobile-devices
https://mobiforge.com/design-development/html5-mobile-web-a-guide-geolocation-api
https://cordova.apache.org/docs/en/3.0.0/cordova/geolocation/geolocation.getCurrentPosition.html
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition);
else
x.innerHTML = "Geolocation is not supported by this browser.";
function showPosition(position)
x.innerHTML =
"Latitude: " +
position.coords.latitude +
"<br>Longitude: " +
position.coords.longitude;
</script>
【问题讨论】：
【参考方案1】： <html>
<head>
...
<script>
$(document).ready(function ()
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
// user Current Position
function displayAndWatch(position)
setCurrentPosition(position);
watchCurrentPosition();
function setCurrentPosition(pos)
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker(
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
);
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
function watchCurrentPosition()
var positionTimer = navigator.geolocation.watchPosition(
function (position)
setMarkerPosition(
currentPositionMarker,
position
);
);
function setMarkerPosition(marker, position)
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center =
lat: position.coords.latitude,
lng: position.coords.longitude
map.setCenter(center);
function locError(error)
// the current position could not be located
);
<script>
</head>
<body>
...
...
<script async defer src="https://maps.googleapis.com/maps/api/js?key=******(Your API Key)">
</script>
</body>
<html>
【讨论】：
您好，感谢您的回复，但我无法正常工作。我现在有这个：【参考方案2】： <!doctype html>
<html>
<head>
<title>Huisartspraktijk app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
/* css styes for the maps */
#map
height: 100%;
html, body
height: 100%;
margin: 0;
padding: 0;
</style>
<!-- Script for the geolocation, Stack Overflow -->
<script>
$(document).ready(function ()
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
// user Current Position
function displayAndWatch(position)
setCurrentPosition(position);
watchCurrentPosition();
function setCurrentPosition(pos)
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker(
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
);
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
function watchCurrentPosition()
var positionTimer = navigator.geolocation.watchPosition(
function (position)
setMarkerPosition(
currentPositionMarker,
position
);
);
function setMarkerPosition(marker, position)
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center =
lat: position.coords.latitude,
lng: position.coords.longitude
map.setCenter(center);
function locError(error)
// the current position could not be located
);
</script>
</head>
<body>
<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->
<div data-role="page" id="mobiel">
<!-- /header -->
<div data-role="header">
<h1>SPOED</h1>
<div data-role="navbar">
<ul>
<li><a href="#main">Mainpage</a></li>
<li><a href="#chat">Chat met de arts</a></li>
<li><a href="#consult">Consultaanvraag</a></li>
<li><a href="#doorverwijzing">Doorverwijzing</a></li>
<li><a href="#bloedonderzoek">Bloedonderzoek</a></li>
<li><a href="#berichten">Berichten</a></li>
<li><a href="#epd">EPD</a></li>
<li><a href="#medicijnen">Mijn medicijnen</a></li>
</ul>
</div>
</div>
<!-- /content -->
<div role="main" class="ui-content" align="center">
<h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>
<div style="background-color: lightyellow">
<br>
<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
<p>Meteorenstraat 4<br>
2024 RK, Haarlem</p>
<p>Telefoon<br>
023 - 525 36 00 </p>
<p>Keuze 1: Spoed <br>
Keuze 2: Herhaalrecepten <br>
Keuze 3: Assistentie</p>
<br>
<!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->
<div id="map"></div>
<script>
var map;
function initMap()
map = new google.maps.Map(document.getElementById('map'),
center: lat: -34.397, lng: 150.644,
zoom: 8
);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
async defer></script>
</div>
<a href="#spoedEisend" class="ui-btn ui-shadow ui-corner-all">Terug</a>
</div>
<!-- /footer -->
<div data-role="footer">
<h2>© 2019 Huisartsapp</h2>
</div>
</div><!-- /page -->
</body>
</html>
【讨论】：
以上是关于在 phonegap 中应用地理位置不起作用的主要内容，如果未能解决你的问题，请参考以下文章
GPS 地理定位应用程序在 Android 的 Phonegap 中不起作用