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 FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
微信小程序云开发详细教程
May 16 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 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 生成N个不重复的随机数
2015/01/21 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
浅析Prototype的模板类 Template
2011/12/07 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python语言中with as的用法使用详解
2018/02/23 Python
使用python爬取B站千万级数据
2018/06/08 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
策划助理岗位职责
2013/11/18 职场文书
部队学习十八大感言
2014/01/11 职场文书
红色故事演讲稿
2014/05/22 职场文书
写给领导的感谢信
2015/01/22 职场文书
三下乡活动心得体会
2016/01/23 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
优秀新员工事迹材料
2019/05/13 职场文书