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中with()方法的语法格式及使用
Aug 04 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
史上最全面的Java面试题汇总!
2015/02/03 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
宣传标语大全
2014/07/01 职场文书
投资意向书
2014/07/30 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python