Cordova各个插件使用介绍系列(五)—$cordovaGeolocation获取当前位置

详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-5-cordovageolocation/

$cordovaGeolocation是可以获取当前位置的ngCordova插件,在项目中应用到,在这里讲解一下:

1、首先需要下载此插件,命令是:

cordova plugin add cordova-plugin-geolocation

  

2、在JS中的代码如下,这个代码写在相应的控制器里并且依赖‘$cordovaGeolocation’,记得在app.js里依赖‘ngCordova’,这是ngCordova官网的控制器里面的代码,:

module.controller(‘GeoCtrl‘, function($cordovaGeolocation) {

  var posOptions = {timeout: 10000, enableHighAccuracy: false};
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      var lat  = position.coords.latitude
      var long = position.coords.longitude
    }, function(err) {
      // error
    });
});

  

3、在项目中,我需要实时监测到地理位置,因此用到了AngularJs里面的$broadcast,$on;$broadcast可以监测到值的变化,而$on就是一旦监测的值发生变化,可以触发到它,结合上面所讲到的获取位置的插件,这样就可以一直监测位置的变化了,代码如下:

module.controller(‘GeoCtrl‘, function($cordovaGeolocation) {

  function getCurrentPosition()
	{
	var posOptions = {timeout: 10000, enableHighAccuracy: false};
  	$cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
     $rootScope.$broadcast(‘selfLocation:update‘, position);
      var lat  = position.coords.latitude
      var long = position.coords.longitude
    }, function(err) {
      // error
    });
});

  

在其他需要获得position的控制器里,要添加$on:

$scope.$on(‘selfLocation:update‘, function (_, location) {
  //不断更新的值
  $scope.currentPosition = {
    latitude: location.latitude,
    longitude: location.longitude
  };
});

这样子只要调用getCurrentPosition()这个函数,然后就可以一直监测到位置数据的变化了

时间: 2024-10-07 10:19:52

Cordova各个插件使用介绍系列(五)—$cordovaGeolocation获取当前位置的相关文章

Cordova各个插件使用介绍系列(四)—canvas2ImagePlugin保存二维码到手机本地

详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-4-canvas2imageplugin/ 在前面几篇文章中简单写了一下,在项目中怎么实现扫描的功能和将信息转化为二维码的功能,现在来介绍一下怎么将生成的二维码保存到手机的本地,这样关于二维码的内容基本上就全面了,好开心~~! 同样的,我还是想说,首先我这个是做基于ionic+ngCordova+Anjularjs的项目,所以,希望大家在看之前已经了解

Cordova各个插件使用介绍系列(二)—$cordovaBarcodeScanner扫描二维码与生成二维码

详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/ 这是一个用来扫描二维码的cordova插件,在做项目的时候想实现类似于微信的扫一扫功能,就想到了cordova的$cordovaBarcodeScanner插件,用很少量的代码就可以实现了,下面来看一下具体的实现步骤: 一.扫描二维码: 1.首先需要有一个简单的项目,然后在命令行输入添加插件的命令: c

Cordova各个插件使用介绍系列(一)—$cordovaSms发送短信

详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/ 这是一个用来扫描二维码的cordova插件,在做项目的时候想实现类似于微信的扫一扫功能,就想到了cordova的$cordovaBarcodeScanner插件,用很少量的代码就可以实现了,下面来看一下具体的实现步骤: 扫描二维码: 1.首先需要有一个简单的项目,然后在命令行输入添加插件的命令: cor

Cordova各个插件使用介绍系列(三)—$cordovaImagePicker从手机图库选择多张图片

宣传vcxb

Cordova Android源码分析系列一(项目总览和CordovaActivity分析)

PhoneGap/Cordova是一个专业的移动应用开发框架,是一个全面的WEB APP开发的框架,提供了以WEB形式来访问终端设备的API的功能.这对于采用WEB APP进行开发者来说是个福音,这可以避免了原生开发的某些功能.Cordova 只是个原生外壳,app的内核是一个完整的webapp,需要调用的原生功能将以原生插件的形式实现,以暴露js接口的方式调用. Cordova Android项目是Cordova Android原生部分的Java代码实现,提供了Android原生代码和上层We

Cordova Android源码分析系列二(CordovaWebView相关类分析)

本篇文章是Cordova Android源码分析系列文章的第二篇,主要分析CordovaWebView和CordovaWebViewClient类,通过分析代码可以知道Web网页加载的过程,错误出来,多线程处理等. CordovaWebView类分析 CordovaWebView类继承了Android WebView类,这是一个很自然的实现,共1000多行代码.包含了PluginManager pluginManager,BroadcastReceiver receiver,CordovaInt

Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO

要求 必备知识 本文要求基本了解 Html/CSS,  JavaScript/JQuery. 开发环境 Dreamweaver CS6 / Chrome浏览器 演示地址 演示地址 资料下载 测试预览截图(抬抬你的鼠标就可以看到演示地址哦): 程序核心代码看这里: $(function(){ function show(){ var colors=["#BA4A3A","#5BB5D6","#8EA83B","#EE5C92",

Xcode Alcatraz插件管理介绍和使用

Xcode Alcatraz插件管理介绍和使用http://www.jianshu.com/p/7a2484123bf6 1.简介 Alcatraz是一个能帮你管理Xcode插件丶模版及颜色配置的工具.它可以直接集成在Xcode的图形界面中,让你感觉就像在使用Xcode自带的功能一样. 2.安装和删除 使用如下的终端来安装Alcatraz: curl -fsSL https://raw.github.com/supermarin/Alcatraz/master/Scripts/install.s

百度广告cordova/phonegap插件使用教程

百度联盟cordova/phonegap插件,是一个方便html5开发着使用的百度广告插件,能很方便的在html5混合应用如cordova,xdk,appcan,webx5,jqmobile.sencha touch,ionic中接入百度ssp联盟广告, ios和android应用都支持,代码完全一样无需修改. 使用过程如下 安装cordova/phonegap百度广告插件 我最开始是使用的cordova命令行直接通过github远程的方式安装,在命令行中输入 cordova plugin ad