uni-app 使用uni-app打包的app在web-view中无法使用navigator.geolocation.getCurrentPosition 定位问题

uni-app 使用uni-app打包的app在web-view中无法使用navigator.geolocation.getCurrentPosition 定位问题

开发环境 版本号 项目创建方式
Windows Windows 11 家庭中文版 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.76

手机系统：Android

手机系统版本号：Android 12

手机厂商：手持PDA

手机机型：PDA

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<html lang="en">  
  <head>  
    <meta charset="UTF-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <title>Document</title>  
  </head>  
  <body>  
    <button onclick="getLocation()">js定位</button>  
    <p id="text"></p>  
    <script>  
      const textdiv = document.getElementById('text');  
      function getLocation() {  
        if (navigator.geolocation) {  
          navigator.geolocation.getCurrentPosition(function (position) {  
            textdiv.innerHTML =  
              '经度：' +  
              position.coords.longitude +  
              '<br/>纬度：' +  
              position.coords.latitude;  
          });  
          console.log('getCurrentPosition');  
        } else {  
            textdiv.innerHTML = '浏览器不支持获取地理位置';  
        }  
      }  
    </script>  
  </body>  
</html>

操作步骤：

vue页面中嵌入web-view 页面， webview地址为：https://cssmx.jst.zj.gov.cn/enterpriseGasCheck/camera/#/location

预期结果：

可以正常定位

实际结果：

不可定位

bug描述：

在vue页面中， 嵌套web-view 组件， web-view 的地址是一个网络地址， 嵌套的项目中有使用navigator.geolocation.getCurrentPosition 定位，导致无法定位， 切换x5内核，依然无法定位

排查过程：

  1. 检查设备的Android system webview ，结果是：91.0.4472.114.
  2. 在hbuilder 中切换浏览器内核为X 5 ， 仍不支持定位。
  3. app权限中支持。

更多关于uni-app 使用uni-app打包的app在web-view中无法使用navigator.geolocation.getCurrentPosition 定位问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 使用uni-app打包的app在web-view中无法使用navigator.geolocation.getCurrentPosition 定位问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的web-view中使用navigator.geolocation.getCurrentPosition确实存在兼容性问题。主要原因如下：

  1. 安全策略限制：Android系统对非HTTPS站点的地理位置获取有限制，确保你的web-view加载的是HTTPS站点。

  2. 权限配置：需要在manifest.json中配置定位权限：

{
  "app-plus": {
    "permissions": [
      "geolocation"
    ]
  }
}
  1. X5内核兼容性：虽然切换了X5内核，但部分手持设备的X5内核可能存在兼容性问题。建议在web-view页面中添加错误回调来捕获具体错误信息：
navigator.geolocation.getCurrentPosition(
  success => console.log(success),
  error => console.error('定位错误:', error.code, error.message)
);
回到顶部