课程表

Cordova课程

工具箱
速查手册

Cordova 地理位置

当前位置:免费教程 » 移动开发 » Cordova

地理位置用于获取有关设备的纬度和经度的信息。

步骤1 - 安装插件

我们可以通过在命令提示符窗口中键入以下代码来安装此插件。

  1. C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

步骤2 - 添加按钮

在本教程中,我们将向您展示如何获取当前位置以及如何监视更改。我们首先需要创建将调用这些函数的按钮。

  1. <button id = "getPosition">CURRENT POSITION</button>
  2. <button id = "watchPosition">WATCH POSITION</button>

步骤3 - 添加事件监听器

现在我们要在设备准备就绪时添加事件监听器。我们将下面的代码示例添加到 index.js 中的 onDeviceReady 函数。

  1. document.getElementById("getPosition").addEventListener("click", getPosition);
  2. document.getElementById("watchPosition").addEventListener("click", watchPosition);

步骤3 - 创建函数

需要为两个事件侦听器创建两个函数。一个用于获取当前位置,另一个用于查看位置。

  1. function getPosition() {
  2.  
  3. var options = {
  4. enableHighAccuracy: true,
  5. maximumAge: 3600000
  6. }
  7. var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
  8.  
  9. function onSuccess(position) {
  10.  
  11. alert('Latitude: ' + position.coords.latitude + '\n' +
  12. 'Longitude: ' + position.coords.longitude + '\n' +
  13. 'Altitude: ' + position.coords.altitude + '\n' +
  14. 'Accuracy: ' + position.coords.accuracy + '\n' +
  15. 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
  16. 'Heading: ' + position.coords.heading + '\n' +
  17. 'Speed: ' + position.coords.speed + '\n' +
  18. 'Timestamp: ' + position.timestamp + '\n');
  19. };
  20.  
  21. function onError(error) {
  22. alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
  23. }
  24. }
  25.  
  26. function watchPosition() {
  27.  
  28. var options = {
  29. maximumAge: 3600000,
  30. timeout: 3000,
  31. enableHighAccuracy: true,
  32. }
  33.  
  34. var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
  35.  
  36. function onSuccess(position) {
  37.  
  38. alert('Latitude: ' + position.coords.latitude + '\n' +
  39. 'Longitude: ' + position.coords.longitude + '\n' +
  40. 'Altitude: ' + position.coords.altitude + '\n' +
  41. 'Accuracy: ' + position.coords.accuracy + '\n' +
  42. 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
  43. 'Heading: ' + position.coords.heading + '\n' +
  44. 'Speed: ' + position.coords.speed + '\n' +
  45. 'Timestamp: ' + position.timestamp + '\n');
  46. };
  47.  
  48. function onError(error) {
  49. alert('code: ' + error.code + '\n' +'message: ' + error.message + '\n');
  50. }
  51.  
  52. }

在上面的例子中,我们使用两个方法 - getCurrentPosition和watchPosition。两个函数都使用三个参数。一旦我们单击“当前位置"按钮,该警报将显示地理位置值。

Cordova Geolocation

如果我们点击 WATCH POSITION 按钮,每三秒钟就会触发相同的提醒。 这样我们可以跟踪用户设备的移动变化。

注意

此插件使用GPS。有时它不能按时返回值,并且请求将返回超时错误。这就是为什么我们指定 enableHighAccuracy:true maximumAge:3600000 的原因。 这意味着如果请求没有按时完成,我们将使用最后一个已知的值。在我们的示例中,我们将maximumAge设置为3600000毫秒。

转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号