cordova+vue+webapp使用html5获取地理位置的方法

1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。

语法:

navigator.geolocation.getCurrentPosition(success, error, options)

参数:

  • success: 成功得到位置信息时的回调函数,使用Position 对象作为唯一的参数。
  • error: 获取位置信息失败时的回调函数,使用 PositionError 对象作为唯一的参数,这是一个可选项。
  • options:一个可选的PositionOptions 对象,包含以下3个参数。
    • enableHighAccuracy 是一个Boolean值,用来表明应用是否使用其最高精度来表示结果,默认为false。
    • timeout 是一个正的long值,表明的是设备必须在多长时间(单位毫秒)内返回一个位置,默认是Infinity。
    • maximumAge 是一个正的long值,表明可以返回多长时间(即最长年龄,单位毫秒)内的可获取的缓存位置。如果设置为 0,说明设备不能使用一个缓存位置,而且必须去获取一个真实的当前位置。如果设置为 Infinity ,那么不管设置的最长年龄是多少,设备都必须返回一个缓存位置。默认值:0

2.success - 成功得到位置信息时的回调函数

navigator.geolocation.getCurrentPosition(function(position)) {
  // 获取成功时的的处理
  //参数position是地理位置对象
}

position中返回的信息如下图:

  • accuracy 获取到的纬度或者经度的精度(以米为单位)
  • altitude 当前地理位置的海拨高度(不能获取为null)
  • altitudeAccurancy 获取到的海拨高度的经度(以米为单位)
  • heading 设备移动的方向(以度为单位)
  • latitude 当前地理位置的纬度
  • longitude 当前地理位置的经度
  • speed 设备的前进速度(以米/秒为单位,不能获取时为null)
  • timestamp 获取地理位置信息时的时间

3.error - 获取位置信息失败时的回调函数

navigator.geolocation.getCurrentPosition(function(position){
   // 获取成功时的的处理;
  //参数position是地理位置对象
},function(error)) {
  // 获取失败时的的处理;
}

error中返回的信息如下图

code属性有以下值:

- 1 地理位置信息的获取失败,因为该页面没有获取地理位置信息的权限。
- 2 地理位置获取失败,因为至少有一个内部位置源返回一个内部错误。
- 3 获取地理位置超时,通过定义PositionOptions.timeout 来设置获取地理位置的超时时长。

message 返回一个开发者可以理解的 DOMString 来描述错误的详细信息。

4.使用Geolocation.getCurrentPosition()注意事项:

  1. 本地项目中在Chrome浏览器中运行时,无法获取到经纬度信息,原因是Chrome已不再支持非安全域的
  2. 浏览器定位请求,只有在https下才可使用定位。在IE、Eage、Firefox下亲测可以获取的经纬度信息。获取到的GPS经纬度信息在百度地图展示位置会与实际位置不同,是因为百度对外接口的坐标系为BD09
  3. 坐标系,并不是GPS采集的真实经纬度,在使用百度地图JavaScript API服务前,需先将非百度坐标通过坐标转换接口转换成百度坐标。(转换方法详见下文)

5.使用Geolocation.getCurrentPosition()获取经纬度信息,并转换为百度坐标并进行逆地址解析:

以Vue项目为例,首先根目录index.html中引入百度API文件,如下图:

获取位置,标记marker并进行逆地址解析代码如下:

    // 1 查询当前位置信息
    getPosition() {
      navigator.geolocation.getCurrentPosition(this.getPositionSuccess, this.getPositionError, {"enableHighAccuracy": true, "timeout": 5000, "maximumAge": 5000})
    },
    // 1-1 查询当前位置信息成功
    getPositionSuccess(position) {
      this.latitude = String(position.coords.latitude)
      this.longitude = String(position.coords.longitude)
      let ggPoint = new BMap.Point(this.longitude, this.latitude)
      let pointArr = []
      pointArr.push(ggPoint)
      let convertor = new BMap.Convertor()
      // 坐标转换
      convertor.translate(pointArr, 1, 5, this.translateCallback)
    },
    // 1-2 查询当前位置信息失败
    getPositionError(error) {
      this.$toast({
        message: `获取地理位置失败请重试~`,
        duration: 1000
      })
    },
     // 坐标转换回调
    translateCallback(data) {
      if (data.status === 0) {
        // 在地图上标注marker
        let marker = new BMap.Marker(data.points[0])
        map.addOverlay(marker)
        map.panTo(data.points[0])
        // 逆地址解析
        let myGeo = new BMap.Geocoder()
        let that = this
        myGeo.getLocation(data.points[0], function(result){
          if (result){
            // 获取逆地址解析结果
            that.clockSite = result.address
          }
        })
      }
    },

坐标转换convertor.translate()方法说明:

语法:

convertor.translate(coords, from, to, fn)

参数:

  • coords:需转换的源坐标
  • from: 源坐标类型 详见:[类型详情][4]
  • to: 目标坐标类型 详见:[类型详情][5]
  • fn: 转换结果回调

6.使用cordova+vue开发webapp中定位解决方法:

在cordova中安装Geolocation插件后,方可在生成的app中获取到地理位置信息,运行如下命令即可:

cordova plugin add cordova-plugin-geolocation

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue引入微信sdk 实现分享朋友圈获取地理位置功能

    最近入职的公司主要做微信端的h5,所以在所难免要引用sdk.虽然官方文档写的还算清楚,但是还是有坑. 1.在index.html中 引入微信sdk <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> 2.在assets/js 下新建文件 wx.js export default { wxShowMenu: fu

  • cordova+vue+webapp使用html5获取地理位置的方法

    1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置. 语法: navigator.geolocation.getCurrentPosition(success, error, options) 参数: success: 成功得到位置信息时的回调函数,使用Position 对象作为唯一的参数. error: 获取位置信息失败时的回调函数,使用 PositionError 对象作为唯一的参数,这是一个可选项. options:一个可选的Posit

  • react native 获取地理位置的方法示例

    react native 官网介绍了这个 api Geolocation 但是这个api只能返回 经纬度 所以要把经纬度 通过逆地理位置转义 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通过这个阿里的开放接口 在 react native 中,我们所用的是react native 自带的api定位功能,无需引入第三方js. react native 定位是通过Geolocation这个模块来实现的.想了解更多关于Geolocatio

  • 详解vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

  • Node.js和PHP根据ip获取地理位置的方法

    一.Node.js实现代码 复制代码 代码如下: var http = require('http');var util = require('util'); /** * 根据 ip 获取获取地址信息 */var getIpInfo = function(ip, cb) {    var sina_server = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=';    var url = sina_ser

  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button&

  • Vue.js 2.0和Cordova开发webApp环境搭建方法

    HTML5开发APP技术文档 一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: 4.环境配置: node 6+ npm 3+ (最好下载Node.js官方最新版本) .jdk1.8.SDK(请直接下载Androidstudio软件官方最新版本,已集成AndroidSDk,建议以默认路径安装) . 二.系统环境变量配置(以window7为例) 1.AndroidSDK配置 A)添加用

  • vue 中基于html5 drag drap的拖放效果案例分析

    事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o

  • Vue项目实现html5图片上传的示例代码

    目录 图例 1.选择图片 2.预览图片 2.1添加图片预览代码 两种方法的对比 3.裁剪图片 4.上传 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 我会以事例贯穿图片接下来,就详细的介绍每个步骤具体实现. 图例 1.选择图片 选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的. 下面就先来看看最简单的选

  • JS获取当前地理位置的方法

    本文实例为大家分享了JS获取当前地理位置方法的具体代码,供大家参考,具体内容如下 1.手机定位 var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数,errorFunc获取定位失败回调 //首先设置默认城市 var defCity = { id: '000001', name: '北京市', date: curDateTime()//获取当前时间方法 }; //默认城市 $.cookie('VP

随机推荐