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 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
Node登录权限验证token验证实现的方法示例
May 25 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
基于文本的访客签到簿
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
PHP中文编码小技巧
2014/12/25 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python输入二维数组方法
2018/04/13 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
python实现简单学生信息管理系统
2020/04/09 Python
python db类用法说明
2020/07/07 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
小学运动会表扬稿
2014/01/19 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
爬山的活动方案
2014/08/16 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
初中语文教学反思范文
2016/03/03 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
golang实现浏览器导出excel文件功能
2022/03/25 Golang
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers