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端的定位功能 获取经纬度,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue 中滚动条始终定位在底部的方法

    滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight 但是问题来了,滚动条并没有到达底部,而是距离底部还有一点距离(一脸懵逼) 估计是动态加载数据时,数据还未加载,滚动条就已经执行,知道原因了,那就实践呗. 第二次尝试,利用vue的watch监控数据的改变,然后动态修改滚动条到顶部的距离

  • vue-baidu-map 进入页面自动定位的解决方案(推荐)

    写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考.若有不完善的地方,欢迎各位大佬指出!,希望对你有帮助! 好了,入正题.其实之前也被这问题困扰过,在网上也查了一番,没找到解决方法.直到今天,在GitHub冒昧地向大佬提了一个 issue,才点醒了我.其实是因为太过急功近利了,没有认真阅读 vue-baidu-map 提供参考文档,也有可能是看过然后忘记了! 首先要明确一点(文档原话):由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组

  • vue中使用refs定位dom出现undefined的解决方法

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别. 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解mounted(){}这个钩子函数是用来做什么的. 下面是vue官方给出的vue生命周期(部分),正如官方所说的一样,一开始不必先理解,不过随这你的学习与使用,他的参考价值会越

  • vue实现某元素吸顶或固定位置显示（监听滚动事件）

    vue实现某元素吸顶或固定位置显示（监听滚动事件）

    最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件, mounted () { window.addEventListener('scroll', this.handleScroll) }, 然后在方法中,添加这个handleScroll方法 handleScroll () {

  • 基于elementUI使用v-model实现经纬度输入的vue组件

    绑定一个 [12.34,-45.67] (东经西经,南纬北纬 正负表示) 形式的经纬度数组,能够按度分秒进行编辑,效果如下所示,点击东经,北纬可切换. 经纬度的 度转度分秒 能够获取度分秒格式数据 Coordinates组件实现 模板 一个span显示东经西经,三个输入框输入度分秒 <template> <div class="coordinates"> <!-- 经度 --> <div class="item"> &

  • 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 技术栈的前端开发技术,在浏览器端调起摄像头

  • 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的移动端图片裁剪组件功能

    基于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在线聊天功能

    本文实例为大家分享了vue实现web在线聊天的具体代码,供大家参考,具体内容如下 最终实现的效果 实现过程 无限滚动窗体的实现之前已经介绍过,这里就不在赘述了,不清楚的可以通过文档前文的传送门进行查看. 实时在线聊天主要功能点 滚动到两天窗体顶部,自动加载历史跟多信息,数据加载的时候,需要有一个loading动画: 发送信息是滚动条自动滑动到窗体底部,并且自己发送的信息出现在聊天窗体中: 收到别人发送信息时,需要判断滚动条处于窗体中的位置,在距离底部一定范围内收到信息需要自动滑动到窗体底部: 收

  • VUE + OPENLAYERS实现实时定位功能

    VUE + OPENLAYERS实现实时定位功能

    前言 本系列文章介绍一个简单的实时定位示例,示例的组成主要包括: 服务后端,使用 Java 语言编写,模拟生成 GeoJSON 数据. 前端展示,使用 Vue + OpenLayers ,负责定时向后端服务请求 GeoJSON 数据,并在以标签的形式展现定位数据. 实现的效果: 一.定义标签样式 var image = new CircleStyle({ radius: 5, fill: new Fill({ color: "rgba(255, 0, 0, 1)" }), stroke

随机推荐