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 ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
vue.js 实现a标签href里添加参数
Nov 12 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
vue 页面跳转的实现方式
Jan 12 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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python3.6正式版新特性预览
2016/12/15 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
Python切片操作深入详解
2018/07/27 Python
Python中文编码知识点
2019/02/18 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python sorted函数原理解析及练习
2020/02/10 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
企业文化建设实施方案
2014/03/22 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
会计工作态度自我评价
2015/03/06 职场文书
建党伟业的观后感
2015/06/01 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书