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实现预加载图片的方法
Mar 17 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
图解js图片轮播效果
Dec 20 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 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中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python实现TCP文件传输
2020/03/20 Python
Python如何读写二进制数组数据
2020/08/01 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
校园学雷锋活动月总结
2014/03/09 职场文书
创先争优承诺书范文
2014/03/31 职场文书
师德先进个人材料
2014/12/20 职场文书
出生证明格式
2015/06/15 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
工作报告范文
2019/06/20 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技