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脚本编程解决考试分数统计问题
Oct 18 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
js如何验证密码强度
Mar 18 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 fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python实现简单五子棋游戏
2019/06/18 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python可视化text()函数使用详解
2020/02/11 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
python如何写出表白程序
2020/06/01 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
文员个人求职自荐信
2013/09/21 职场文书
医学生求职自荐书
2014/06/12 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
深入理解go slice结构
2021/09/15 Golang
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers
MySQL新手入门进阶语句汇总
2022/09/23 MySQL