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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 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
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
phpfpm的作用和用法
2019/10/10 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python打印输出数组中全部元素
2018/03/13 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
2014年营业员工作总结
2014/11/18 职场文书
施工员岗位职责
2015/02/10 职场文书
导游词之青城山景区
2019/09/27 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS