在uniapp的webview组件引用的网页内如何实时定位
背景
本人使用uniapp开发了一个app,其中App有个页面是地图界面(Mapbox开发),因为uniapp无法直接实现地图,最后用Webview组件嵌套了一个vue开发网页。其中有一个定位功能,最开始是用uniapp的getLocation方法,在非地图界面进行定位,然后把定位结果以url参数的方法传递到地图界面。后来客户就开发反馈了,说地图界面的定位不会更新。
为了解决在Webview里定位定位更新的问题,做了很多尝试,最开始以为因为uniapp打包成App时,其实所有的页面都是在Android的Webview里跑的,就想着其他页面能定位,地图界面也能定位。就在地图界面直接调用uniapp的API,结果就是失败了,最后在uniapp的文档中发现,uniapp中webview的网页可以调用5+的全部API。
Q:web-view 加载的 HTML 中,能够调用 5+ 的能力么?
A:加载的 HTML 中是有 5+ 环境的,在 plusready 后调用即可。参考:一个简单实用的 plusready 方法
解决方法
最后查询了5+的文档,通过代码实现了在Webview的网页内直接定位,代码如下:
document.addEventListener("plusready", () => {//扩展API加载完成事console.log("扩展能力加载完成")plus.geolocation.getCurrentPosition(res => {console.log("定位成功");console.log(res.coords);this.lng = res.coords.longitude;this.lat = res.coords.latitude;}, err => {console.log("定位失败")},{timeout: 4000,//定位超时时间enableHighAccuracy: true,//启用高精度provider: "system",//使用系统定位geocode: false, coordsType: "wgs84"//坐标系});},false)
后来看了一下,5+可以调用大部分的Android本地设备
在uniapp的webview组件引用的网页内如何实时定位相关推荐
- 如何在CSDN上快速引用到网页内的局部位置?
简 介: 利用网页内的跳转,可以使得博文中的引用更加的精确.可以在点击跳转之后能够精确定位在引用网页中的位置.这需要能够准确获得所在网页内的"锚定字符串".本文总结了CSDN,Gi ...
- UNI-APP在自定义组件中内嵌H5/Html网页,可自定义webview大小,加载不闪屏
问题描述: UNI-APP在自定义组件中内嵌H5/Html网页时,通过内置组件 web-view 实现(如下),发现会自动铺满整个页面,不可控制大小(默认充满屏幕不可控制大小) <web-vie ...
- uniapp微信小程序引用标准版交易组件
跳过前期准备,具体可看官方文档: 标准版组件引用 1.引入组件 pages.json "plugins": {"mini-shop-plugin": {&quo ...
- 微信小程序开发之webview组件内网页实现微信原生支付
前言.背景 本人目前的工作岗位是安卓工程师,在这之前对于前端和后台的知识基本是白纸,只是在日常的工作项目中有需要和小伙伴进行对接的时候接触了那么一丢丢,对于前端和后台的一些专业描述和理解有不当之处还请 ...
- uniapp微信小商店引用标准版交易组件
uniapp微信小商店引用标准版交易组件 1.在微信公众平台 开通交易组件 2.新建一个ui-app小程序 3.引入组件 pages.json "plugins": {" ...
- 实践:uniapp中webview内置网页与app实时通讯
目录 1.uniapp官网webview地址 2.uniapp中vue文件代码 3.webview链接的远程网页代码 4.vue引入uniapp的JS 5.到此uniapp使用webview内置网页与 ...
- uniapp vue页面嵌套webview组件 ,自定义webview大小
注意 web-view组件要放到最前,在其之前的代码的都会压住 <view class="container"><!--webview 放到顶部,通过定位到党网联 ...
- uniapp 使用webview
返回的数据:{"type": "message","target": {},"currentTarget": {},&q ...
- uni-app 使用 web-view 页面之间互相跳转、通信
最近开发小程序的时候.需要嵌入一个第三方网站.并且和第三方网站有些交互.这个第三方页面本身就是一个 HTML 页面.想着把它给嵌入到 uni-app 中,结果没实现-(很多的 js 代码在小程序中不识 ...
最新文章
- 常见的一些功能测试用例
- 前端project师养成记:开发环境搭建(Sublime Text必备插件推荐)
- Java集合篇:ConcurrentHashMap详解(JDK1.6)
- 【数据结构与算法】之深入解析“压缩字符串”的求解思路与算法示例
- Java嵌入oracle,Java插入Oracle Spatial空间数据
- okHttp记录---response.body().string()输出的结构是乱码
- react jquery_2019年React简介(面向仅了解jQuery的人们)
- 单片机与普通微型计算机不同在于,单片机与普通计算机的不同之处在于什么,单片机与普通微型计算机的不同...
- java 数据库mysql_java是怎么连接mysql数据库的
- 记一次ST-LINK维修及刷固件过程
- hive中删除表的错误Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException...
- 说说 IT 技术人的职业规划
- POJ1915(Knight Moves)
- jQuery blockUI 使用详解
- 人工智能认知技术,在各行业的应用介绍
- ZAO作一下,你会是谁
- CodeWarrior使用教程第一部分: 认识 CodeWarrior
- 关于CS1.6中模型导出到3dsmax
- openEuler虚拟机配置yum源
- JSP 手机销售管理系统 myeclipse开发web网页 mysql数据库
热门文章
- linux 系统命令被后门修改_红队实战攻防技术分享:Linux后门总结SSH利用篇
- 118-C语言结构体——投票器的实现
- Px、Em 换算工具
- 像Bill Gates一样思考集装箱
- 新零售能拯救传统企业吗?
- 谭浩强c语言程序设计第四版课后习题:求Sn=a+aa+aaa+aaaa+...n个a ,a是数字 ,n表示a的位数
- Floyd算法C++实现与模板题应用
- 电子邮件之SMTP协议详解
- 基于微信小程序跳蚤市场-二手商城-计算机毕业设计
- 散户做外汇买卖怎样稳定的获利