vue 实现Web端的定位功能 获取经纬度


Posted in Javascript onAugust 08, 2019

首先我这里的需求呢, 是获取当前用户的经纬度

经过无数次的测试, 先后用了 腾讯/百度地图的api,最后绝对还是高德的js APi

废话不多说, 直接上代码。

 vue 实现Web端的定位功能 获取经纬度

首先在 index.html 里面 引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>

然后 去你需要获取的页面 开始写, 我这里拿来测试用,所以只有一个App.vue 文件。

vue 实现Web端的定位功能 获取经纬度

貌似已经 很详细了。

通过调用谷歌的api 可以实现 准确定位,

function onComplete(data){
 // 这里面是 允许获取位置服务后 发生的事情,这里我直接获取想要的信息
}
function onError(data){
 // 这里面是获取定位失败后, 执行的事情,
 // 这里我设置的是获取失败后, 启用ip 定位
 // 但是有一点嗷,就是不太准确, 而且安卓微信上 经过测试,只能走这里 。
}

下面上完整代码:

function onComplete(data){
 // 这里面是 允许获取位置服务后 发生的事情,这里我直接获取想要的信息
}
function onError(data){
 // 这里面是获取定位失败后, 执行的事情,
 // 这里我设置的是获取失败后, 启用ip 定位
 // 但是有一点嗷,就是不太准确, 而且安卓微信上 经过测试,只能走这里 。
}

经过测试:

ios机型,在微信内置浏览器 或 其他浏览器 可以完美 精确定位

安卓机型, 在微信内置浏览器 显示定位失败, 转为ip定位, 稍有偏差,但不会超级大,但是在其他浏览器 可以实现精确定位。

总结

以上所述是小编给大家介绍的vue 实现Web端的定位功能 获取经纬度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 #Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 #Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
微信小程序嵌入腾讯视频源过程详解
Aug 08 #Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 #Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 #Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 #Javascript
You might like
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP自定义多进制的方法
2016/11/03 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
Python的面向对象思想分析
2015/01/14 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python多线程之事件Event的使用详解
2018/04/27 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
导游词之清晏园
2019/11/22 职场文书
Python实现滑雪小游戏
2021/09/25 Python
Python简易开发之制作计算器
2022/04/28 Python