PhoneGap 获取设备位置
PhoneGap获取设备位置
本节将让您了解地理定位以及我们如何使用 PhoneGap 获取我们的设备位置。地理定位为我们提供有关经度和纬度的信息。经度和纬度是我们设备所在位置的信息。全球定位系统，也称为 GPS 和从网络信号推断出的位置，例如 IP 地址、WiFi、RFID 和蓝牙 MAC 地址，以及 GSM/CDMA 小区 ID 是一些常见的位置信息来源。 API 可以或不能返回设备的实际位置。确定设备位置后，我们可以在我们的应用程序中使用这些信息。
在地理定位部分，我们可以使用geolocation.getCurrentPosition、geolocation.watchPosition、geolocation。 clearWatch 方法，这些方法可以有多个参数，例如 geolocationSuccess、geolocationError、geolocationOptions。我们还可以使用Position、PositionError和Coordinates对象。
首先，我们将学习如何获取设备的位置，然后我们将挂钩使用两个最重要的 API，即 Google Places API 和 Google Maps API。我们还将学习如何获得纬度和经度。 Play 商店中有数百个基于这些 API 的移动应用程序可用。
这些是我们在 PhoneGap 中获取设备位置必须执行的以下步骤:
1) 创建一个新项目
首先，我们将创建一个带有空白模板的新 PhoneGap 项目。如果您不知道如何使用空白模板创建应用程序，请查看 PhoneGap 项目 链接。
2) 创建纬度和经度的空间
我们将更改head部分的标题并使用在body部分添加标题
标签。我们将使用
标签为纬度和经度创建空间。我们还将对纬度和经度使用
标签带身份证。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title> Location </title>
</head>
<body>
<h1> Device Location </h1>
<p>Latitude: <ouput id="lat"></ouput></p>
<p>Longitude: <output id="long"></output></p>
<div id="result"></div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
3) 创建一个窗口。 onload 函数
在下一步中，我们将创建window.onload 函数。我们知道这个函数会在窗口画面加载时自动调用。我们将添加一个名为deviceready 事件的事件侦听器，我们将其称为init 回调函数。
<script>
window.onload=function()
{
document.addEventListener('deviceready', init);
// for browser testing
//init();
}
</script>
4) 创建init回调函数
现在，我们将创建init回调函数。 PhoneGap 有一个地理定位对象，它基本上包装了自然的 JavaScript 地理定位对象。我们将在地理定位中使用它。为此，我们将调用 navigator.geolocation.getCurrentPosition 函数。如果成功获取当前位置，该函数将调用getSuccess函数；否则，将调用 getError 函数。 init 函数的编码方式如下:
function init()
{
navigator.geolocation.getCurrentPosition(success, error);
}
5) 创建 onSuccess 和 onError 回调函数
现在，我们将创建这两个回调函数。 onError 函数将显示定义错误的警报消息。 onSuccess 函数有一个名为 position 的参数。此函数将获取纬度和经度位置坐标并显示在为纬度和经度输出创建的空间中。这两个函数都将按以下方式编码:
function success(position)
{
var lat = position.coords.latitude;
var long = position.coords.longitude;
document.getElementById('lat').innerHTML = lat;
document.getElementById('long').innerHTML = long;
}
function error(e)
{
alert(e.message);
}
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title> Location </title>
<script>
window.onload=function()
{
document.addEventListener('deviceready', init);
init();
}
function init()
{
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position)
{
var lati = position.coords.latitude;
var longi = position.coords.longitude;
document.getElementById('lat').innerHTML = lati;
document.getElementById('long').innerHTML = longi;
}
function onError(e)
{
alert(e.message);
}
</script>
</head>
<body>
<h1> Device Location </h1>
<p>Latitude: <output id="lat"></output></p>
<p>Longitude: <output id="long"></output></p>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
在下一部分中，我们将了解如何将这些信息用于 Google 地方信息。
