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


Posted in Javascript onJuly 06, 2019

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中返回的信息如下图:

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

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

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

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

error中返回的信息如下图

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

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文件,如下图:

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

获取位置,标记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

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

Javascript 相关文章推荐
javascript 事件处理程序介绍
Jun 27 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
javascript中scrollTop详解
Apr 13 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 #Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 #Javascript
基于vue实现圆形菜单栏组件
Jul 05 #Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 #Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 #Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 #Javascript
Electron vue的使用教程图文详解
Jul 05 #Javascript
You might like
咖啡知识大全
2021/03/03 新手入门
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
生成二维码方法汇总
2014/12/26 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
vue实现登录功能
2020/12/31 Vue.js
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
python实现的各种排序算法代码
2013/03/04 Python
python 性能优化方法小结
2017/03/31 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
详解python单元测试框架unittest
2018/07/02 Python
python实现合并两个排序的链表
2019/03/03 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
python实现kmp算法的实例代码
2019/04/03 Python
python实现键盘输入的实操方法
2019/07/16 Python
Python编写万花尺图案实例
2021/01/03 Python
护士进修自我鉴定
2014/02/07 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
仙境之桥观后感
2015/06/16 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Java基础——Map集合
2022/04/01 Java/Android