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的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
vue监听键盘事件的相关总结
Jan 29 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/11/27 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
js实现表格字段排序
2014/02/19 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
Python实现备份文件实例
2014/09/16 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
python 调整图片亮度的示例
2020/12/03 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
求职自荐书范文
2013/12/04 职场文书
大二自我鉴定
2014/01/31 职场文书
环境工程专业自荐信
2014/03/03 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
2016年春节慰问信息
2015/03/25 职场文书
培训通知书模板
2015/04/17 职场文书
《比尾巴》教学反思
2016/02/24 职场文书