在uniapp的webview组件引用的网页内如何实时定位

36 篇文章 13 订阅
24 篇文章 2 订阅

背景

本人使用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本地设备

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值