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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
微信小程序云开发之使用云函数
2019/05/17 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python 打印中文字符的三种方法
2018/08/14 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Pytorch之finetune使用详解
2020/01/18 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
用python对excel查重
2020/12/07 Python
java字符串格式化输出实例讲解
2021/01/06 Python
C#如何进行LDAP用户校验
2012/11/21 面试题
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
大学生求职信范文
2014/05/24 职场文书
欢迎领导检查标语
2014/06/27 职场文书
写字楼租赁意向书
2014/07/30 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers