cordova - Cordova地理位置 - apache cordova地图 - cordova教程 , 学习cordova , cordova android , cordova ios



  • 地理位置是用于获取有关设备的经纬度信息。
cordova教程 - cordova - 
学习cordova - Cordova Architecture plugins -  apache cordova代码- apache cordova的例子
Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位

第1步 - 安装插件

  • 我们可以通过输入以下代码,命令提示符窗口安装这个插件。
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
cordova教程 - cordova - 
学习cordova - 
cordova plugin - cordova maps geolocation - apache cordova地理位置 - Cordova plugin 生成 - Yeoman generator のインストール
- apache cordova代码- apache cordova的例子

cordova教程 - cordova - 学习cordova - cordova plugin - cordova maps geolocation - apache cordova地理位置 - Cordova plugin 生成 - Yeoman generator のインストール - apache cordova代码- apache cordova的例子

第2步 - 添加按钮

  • 在本教程中,我们将学习如何获得当前位置以及如何监视位置改变。我们首先需要创建调用这些功能的按钮。
<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

第3步 - 添加事件监听器

  • 现在,我们要添加事件侦听器在设备已准备就绪时。我们将在index.js添加代码示例下面代码到 onDeviceReady 函数。
document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

第3步 - 创建函数

  • 两个函数需要创建用于两个事件侦听器。一个将被用于获取当前位置,另一个用于监视位置。
function getPosition() {

   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
	
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {

      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {

   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }

   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {

      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }

} 
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 在上面的例子,我们使用两种方法 − getCurrentPosition 和 watchPosition。这两个函数使用三个参数。当我们点击CURRENT POSITION按钮,弹出显示地理位置值。
 current position button

学习cordova - cordova教程 - 当前位置按钮 - cordova示例 - cordova程序

  • 如果我们点击 WATCH POSITION按钮,相同的弹出提示将每三秒钟触发一次。这样我们就可以跟踪用户的设备的运动的变化。
Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位

cordova教程 - cordova - 
学习cordova - 
cordova plugin - cordova maps geolocation - 
apache cordova地图 - apache cordova地理位置 - Cordova plugin 生成 - Yeoman generator のインストール
- apache cordova代码- apache cordova的例子

cordova教程 - cordova - 学习cordova - cordova plugin - cordova maps geolocation - apache cordova地图 - apache cordova地理位置 - Cordova plugin 生成 - Yeoman generator のインストール - apache cordova代码- apache cordova的例子

  • 这个插件是使用GPS。有时不能按时返回值,并请求将返回超时错误。这就是为什么我们指定enableHighAccuracy:true和maximumAge: 3600000. 这意味着,如果请求不按时完成后,我们将使用最后已知值来代替。在我们的例子中,最大值设置为3600000毫秒。

wikitechy provides you the following points such as cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova api , cordova-android , phonegap cordova , cordova plugin , cordova下载 , apache cordova是什么 , cordova cli , cordova plugin开发 , apache cordova教程 , cordova 教程 , vue cordova , ngcordova , ionic cordova , cordova plugin file , cordova 安装 , ionic 会取代cordova么 , cordova怎么样 , cordova插件开发 ,cordova菜鸟教程 , cordova react , cordova ionic vuejs , 菲律宾cordova岛 , cordova 持续定位 , phonegap , cordoba , cordova plugins , cardova , apache cordova , cordova phonegap , ionic cordova phonegap , apache cordova alternatives , cordova for visual studio , best ide for cordova development , create cordova plugin android , cordova ios 4 , apache cordova download , cordova build command , cordova web support , cordova webview android , how to install cordova , phonegap developer , apache cordova ionic , cordova command

Related Searches to Cordova地理位置