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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
JsDom 编程小结
Aug 09 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
详解小程序循环require之坑
Mar 08 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
js实现图片3D轮播效果
Sep 21 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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延迟静态绑定实例分析
2015/02/08 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python实现线程状态监测简单示例
2018/03/28 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
详解用python写一个抽奖程序
2019/05/10 Python
Python3读写ini配置文件的示例
2020/11/06 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
打造完美自荐信
2014/01/24 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
实习推荐信
2014/05/10 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
护士旷工检讨书
2015/08/15 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang