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里使用Dom操作Xml
Sep 20 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 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
PHP中的extract的作用分析
2008/04/09 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
关于php开启错误提示的总结
2019/09/24 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
简述jQuery Easyui一些用法
2017/08/01 jQuery
工作中常用到的ES6语法
2018/09/04 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
详解Python的Django框架中的模版相关知识
2015/07/15 Python
python 简单的多线程链接实现代码
2016/08/28 Python
Django卸载之后重新安装的方法
2017/03/15 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
python实现列表的排序方法分享
2019/07/01 Python
python3安装crypto出错及解决方法
2019/07/30 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
中软国际Java程序员笔试题
2014/07/19 面试题
事务机电主管工作职责
2014/02/25 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
主要领导对照检查材料
2014/08/26 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
python运算符之与用户交互
2022/04/13 Python
Python 中面向接口编程
2022/05/20 Python