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 Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
Highcharts入门之简介
Aug 02 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
vue.js 获取当前自定义属性值
Jun 01 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
JavaScript类的继承多种实现方法
May 30 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
PHP crc32()函数讲解
2019/02/14 PHP
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
express 项目分层实践详解
2018/12/10 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Python中安装easy_install的方法
2018/11/18 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
副总经理工作职责
2013/11/28 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
推广活动策划方案
2014/08/23 职场文书
库房管理员岗位职责
2015/02/12 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers