uni-app中h5调用uni.getLocation无反应

uni-app中h5调用uni.getLocation无反应

问题描述

新创建了一个vue3的工程，在首页里面放了点代码，不执行getLocation的回调，manifest.json中也对高德地图中设置了key和secret了。

代码示例

<template>  
    <view class="content">  
        <view class="text-area">  
            <text class="title" @click="handleClick">123123123123</text>  
        </view>  
    </view>  
</template>  

<script setup>  
    const handleClick = () => {  
        console.log(111)  
        uni.getLocation({  
            complete (res) {  
                console.log(2222)  
            },  
            fail (a) {  
                console.log(33333)  
            }  
        });  
    }  
</script>

控制台只输出111， 2222和3333都不输出。


更多关于uni-app中h5调用uni.getLocation无反应的实战教程也可以访问 https://www.itying.com/category-93-b0.html

17 回复

控制台有报错吗

更多关于uni-app中h5调用uni.getLocation无反应的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没报错，用内置浏览器可以。用chrome和手机浏览器，都没任何反应

回复 真真假假: 检查下是否设备或浏览器设置问题，这边测试正常

回复 真真假假: 看下定位有没有开，我谷歌也不行，但是edge就可以

回复 真真假假:请问有解决嘛？ 是怎么解决的？ 我这边也是这个情况 在谷歌上不行，edge上可以

回复 Tevin1021: 为啥我edge和谷歌都不行 ，，

HBuilderX 4.08 chrome 123.0.6312.86 内置浏览器可以获取（经纬度获取的不是当前地址的），edge可以获取，chrome已授权但还是毫无反应（不报错，success,fail,complete都没反应）

回复 k***@126.com: chrome 需要请求 goole 的服务，确认下是否开启了科学上网 而且理论上请求失败，会触发失败回调，只不过超时时间久一点

楼主解决了吗，我也遇到了一样的问题，complete都不执行，内置浏览器可以，谷歌浏览器不触发

请问有解决嘛？ 是怎么解决的？ 我这边也是这个情况

我也碰到了，谷歌浏览器弹出来是否允许访问位置的提醒，点击了允许后，没有任何反应都不触发

HBuilderX 4.01 运行到 chrome, 测试帖子中的代码可以触发 complete 回调，可以确认下位置授权是否成功，或者私信联系方式远程看下

老哥这个问题解决呢嘛 我也是谷歌浏览器和edge 允许后 不触发api

chrome 需要请求 goole 的服务，确认下是否开启了科学上网 而且理论上请求失败，会触发失败回调，只不过超时时间久一点

回复 DCloud_UNI_WZF: 好的我看下

楼主解决了吗，我也遇到了一样的问题

在uni-app中，uni.getLocation API 用于获取设备的地理位置信息。如果你在H5平台上调用 uni.getLocation 没有反应，可能是由于浏览器的权限限制或调用方式不正确。以下是一些可能的代码示例和排查方法，帮助你定位问题。

1. 检查权限请求

首先，确保你的网页已经请求了地理位置权限。在H5中，浏览器通常会弹出一个对话框要求用户允许访问位置信息。如果没有弹出这个对话框，可能是因为代码没有正确触发权限请求，或者浏览器策略阻止了权限请求。

uni.getLocation({
    type: 'gcj02', // 返回可以用于 `uni.openLocation` 的经纬度
    success: function (res) {
        console.log('位置信息：', res.latitude, res.longitude);
    },
    fail: function (err) {
        console.error('获取位置失败：', err);
    }
});

2. 使用HTTPS

大多数现代浏览器要求网页在使用地理位置API时必须通过HTTPS协议服务。如果你的页面不是通过HTTPS提供的，浏览器可能会阻止地理位置请求。

3. 浏览器兼容性处理

不同浏览器对地理位置API的支持程度不同。为了确保兼容性，你可以使用 navigator.geolocation 作为备选方案。

if (typeof uni !== 'undefined' && uni.getLocation) {
    // 使用uni-app的API
    uni.getLocation({ /* 参数 */ });
} else if (navigator.geolocation) {
    // 浏览器原生地理位置API
    navigator.geolocation.getCurrentPosition(
        function(position) {
            console.log('位置信息（浏览器API）：', position.coords.latitude, position.coords.longitude);
        },
        function(error) {
            console.error('获取位置失败（浏览器API）：', error.message);
        }
    );
} else {
    console.error('浏览器不支持地理位置API');
}

4. 检查控制台错误

打开浏览器的开发者工具，查看控制台是否有任何错误信息。这些信息可以提供关于为什么 uni.getLocation 没有反应的线索。

5. 确保uni-app配置正确

如果你是在uni-app项目中打包成H5，确保你的 manifest.json 文件中的相关配置是正确的，特别是关于权限和插件的部分。

通过上述步骤，你应该能够诊断出在H5平台上调用 uni.getLocation 无反应的问题。如果问题依然存在，可能需要进一步检查uni-app的版本和浏览器的具体实现细节。

回到顶部