vue 实现Web端的定位功能 获取经纬度
首先我这里的需求呢, 是获取当前用户的经纬度
经过无数次的测试, 先后用了 腾讯/百度地图的api,最后绝对还是高德的js APi
废话不多说, 直接上代码。
首先在 index.html 里面 引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>
然后 去你需要获取的页面 开始写, 我这里拿来测试用,所以只有一个App.vue 文件。
貌似已经 很详细了。
通过调用谷歌的api 可以实现 准确定位,
function onComplete(data){ // 这里面是 允许获取位置服务后 发生的事情,这里我直接获取想要的信息 } function onError(data){ // 这里面是获取定位失败后, 执行的事情, // 这里我设置的是获取失败后, 启用ip 定位 // 但是有一点嗷,就是不太准确, 而且安卓微信上 经过测试,只能走这里 。 }
下面上完整代码:
function onComplete(data){ // 这里面是 允许获取位置服务后 发生的事情,这里我直接获取想要的信息 } function onError(data){ // 这里面是获取定位失败后, 执行的事情, // 这里我设置的是获取失败后, 启用ip 定位 // 但是有一点嗷,就是不太准确, 而且安卓微信上 经过测试,只能走这里 。 }
经过测试:
ios机型,在微信内置浏览器 或 其他浏览器 可以完美 精确定位
安卓机型, 在微信内置浏览器 显示定位失败, 转为ip定位, 稍有偏差,但不会超级大,但是在其他浏览器 可以实现精确定位。
总结
以上所述是小编给大家介绍的vue 实现Web端的定位功能 获取经纬度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
基于elementUI使用v-model实现经纬度输入的vue组件
绑定一个 [12.34,-45.67] (东经西经,南纬北纬 正负表示) 形式的经纬度数组,能够按度分秒进行编辑,效果如下所示,点击东经,北纬可切换. 经纬度的 度转度分秒 能够获取度分秒格式数据 Coordinates组件实现 模板 一个span显示东经西经,三个输入框输入度分秒 <template> <div class="coordinates"> <!-- 经度 --> <div class="item"> &
-
vue实现某元素吸顶或固定位置显示(监听滚动事件)
最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件, mounted () { window.addEventListener('scroll', this.handleScroll) }, 然后在方法中,添加这个handleScroll方法 handleScroll () {
-
vue中使用refs定位dom出现undefined的解决方法
之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别. 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解mounted(){}这个钩子函数是用来做什么的. 下面是vue官方给出的vue生命周期(部分),正如官方所说的一样,一开始不必先理解,不过随这你的学习与使用,他的参考价值会越
-
vue-baidu-map 进入页面自动定位的解决方案(推荐)
写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考.若有不完善的地方,欢迎各位大佬指出!,希望对你有帮助! 好了,入正题.其实之前也被这问题困扰过,在网上也查了一番,没找到解决方法.直到今天,在GitHub冒昧地向大佬提了一个 issue,才点醒了我.其实是因为太过急功近利了,没有认真阅读 vue-baidu-map 提供参考文档,也有可能是看过然后忘记了! 首先要明确一点(文档原话):由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组
-
vue 中滚动条始终定位在底部的方法
滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight 但是问题来了,滚动条并没有到达底部,而是距离底部还有一点距离(一脸懵逼) 估计是动态加载数据时,数据还未加载,滚动条就已经执行,知道原因了,那就实践呗. 第二次尝试,利用vue的watch监控数据的改变,然后动态修改滚动条到顶部的距离
-
vue 实现Web端的定位功能 获取经纬度
首先我这里的需求呢, 是获取当前用户的经纬度 经过无数次的测试, 先后用了 腾讯/百度地图的api,最后绝对还是高德的js APi 废话不多说, 直接上代码. 首先在 index.html 里面 引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script> 然后 去你需要获取的页面 开始写, 我这里
-
Vue实现浏览器端扫码功能
背景 不久前我做了关于获取浏览器摄像头并扫码识别的功能,本文中梳理了涉及到知识点及具体代码实现,整理成此篇文章内容. 本文主要介绍,通过使用基于 vue 技术栈的前端开发技术,在浏览器端调起摄像头
-
VUE实现移动端列表筛选功能
最近兴趣所致,打算使用vant搭建一个webapp,由于需要使用列表筛选,没有找到合适组件,于是写了一个简单的功能,权当记录. 效果如下: HTML: <div class="filterbar"> <div class="filterbar-title"> <ul class="title-ul"> <li :class="{'title-li':true, 'current': item.i
-
基于vue实现web端超大数据量表格的卡顿解决
一.整体思路 1.思路来源 最近工作比较忙好久没写文章了,有一丢丢不知道如何写起了,那就先说说我是为什么要开发本文的组件把.公司有一个定位系统,基本上来说一个定位单位一分钟或者更短就会有一个定位点,这样一天下来就会有很多定位点了,如果表格想要一下子放一天甚至三天的数据,那么数据量将会特别大(可能会到达5万条左右的数据),如果我们显示的列又比较多的话,那么表格的卡顿问题就会很明显了.我们公司web端选择的ui框架是 iview ,说实话 iview 的其他组件还行,不过表格的话在大量数据面前显得
-
基于JS实现web端录音与播放功能
纯js实现web端录音功能,功能并不是特别多,逐步增加中,详细地址:github. getUserMedia在非localhost和127的情况下,需要开启https,由于腾讯云的没备案,demo就不放了,可以自行获取代码并启动测试. 实现方式 实现原理的话,主要是以下三点, 利用webrtc的getUserMedia方法获取设备音频输入,使用audioprocess得到音频流(pcm流,范围-1到1). 转码,利用前端中的ArrayBuffer等二进制操作按采样位数处理流信息. 使用decod
-
vue+web端仿微信网页版聊天室功能
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室--vueWebChat,实现了发送消息.表情(动图),图片.视频预览,右键菜单.截屏.截图可直接粘贴至文本框进行发送. 二.技术框架 •MVVM框架:Vue2.5.6 •状态管理:Vuex •页面路由:Vue-router •iconfont图标:阿里巴巴字体图标库 •自定义滚动条:vue-gemi
-
基于Vue的移动端图片裁剪组件功能
最近项目上要做一个车牌识别的功能.本来以为很简单,只需要将图片扔给后台就可以了,但是经测试后识别率只有20-40%.因此产品建议拍摄图片后,可以对图片进行拖拽和缩放,然后裁剪车牌部分上传给后台来提高识别率.刚开始的话还是百度了一下看看有没有现成的组件,但是找来找去都没有找到一个合适的,还好这个功能不是很着急,因此自己周末就在家里研究一下. Demo地址:https://vivialex.github.io/demo/imageClipper/index.html 下载地址:https://git
-
vue中实现高德定位功能
一.获取key及在index.htm中引入 首先需要成为高德开发者,申请到适合项目的key.并在index.html中进行引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script> 二.在配置文件中进行相应配置 根据vue脚手架的不用需要在不同的文件
-
vue实现web在线聊天功能
本文实例为大家分享了vue实现web在线聊天的具体代码,供大家参考,具体内容如下 最终实现的效果 实现过程 无限滚动窗体的实现之前已经介绍过,这里就不在赘述了,不清楚的可以通过文档前文的传送门进行查看. 实时在线聊天主要功能点 滚动到两天窗体顶部,自动加载历史跟多信息,数据加载的时候,需要有一个loading动画: 发送信息是滚动条自动滑动到窗体底部,并且自己发送的信息出现在聊天窗体中: 收到别人发送信息时,需要判断滚动条处于窗体中的位置,在距离底部一定范围内收到信息需要自动滑动到窗体底部: 收
-
VUE + OPENLAYERS实现实时定位功能
前言 本系列文章介绍一个简单的实时定位示例,示例的组成主要包括: 服务后端,使用 Java 语言编写,模拟生成 GeoJSON 数据. 前端展示,使用 Vue + OpenLayers ,负责定时向后端服务请求 GeoJSON 数据,并在以标签的形式展现定位数据. 实现的效果: 一.定义标签样式 var image = new CircleStyle({ radius: 5, fill: new Fill({ color: "rgba(255, 0, 0, 1)" }), stroke
随机推荐
- 浅谈Angular2 ng-content 指令在组件中嵌入内容
- [PHP]实用函数5
- Java实现文件分割和文件合并实例
- js Canvas实现的日历时钟案例分享
- MySQL与Oracle 差异比较之七用户权限
- VS2010新建站点发布并访问步骤详解
- Windows+Apache+resin配置
- C++面试题之结构体内存对齐计算问题总结大全
- MySQL 数据库对服务器端光标的限制
- JS使用onerror捕获异常示例
- 使用Ajax、json实现京东购物车结算界面的数据交互实例
- Java编程之jdk1.4,jdk1.5和jdk1.6的区别分析(经典)
- C#获取U盘序列号的方法
- PHP新手上路(九)
- android新建草稿删除后下次开机还会显示保存的草稿
- Python KMeans聚类问题分析
- TensorFlow入门使用 tf.train.Saver()保存模型
- 浅谈C#中的Async和Await的用法详解
- Python实现的逻辑回归算法示例【附测试csv文件下载】
- Java避免UTF-8的csv文件打开中文出现乱码的方法