uni-app vue3中 chooseLocation API 报Bug

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app vue3中 chooseLocation API 报Bug

开发环境 版本号 项目创建方式
Windows win10专业版22H2 HBuilderX
HBuilderX 4.24

示例代码：

uni.chooseLocation({  
    success: (res) => {  
        this.hasLocation = true,  
        this.location = formatLocation(res.longitude, res.latitude),  
        this.locationAddress = res.address  
    }  
})

代码截选来源于uniapp vue3示例项目

操作步骤：

  • 运行uniapp vue3示例项目
  • 接口页->位置->使用地图选择位置
  • 点击选择位置
  • （地图已打开）点击浏览器左上角的返回上页按钮

预期结果：

  • 关闭该页面且回到上一个页面

实际结果：

  • 页面路径已更改为上一个页面的路径但是地图仍然是在打开显示中

bug描述：

在官方uniappVue3版本的示例项目使用chooseLocation 选择地图Api，打开地图选点后，无法使用PC浏览器【←返回上一页】按钮关闭地图及当前页，但地址栏中的路径已改变为上一页的路径（在点击手机中的微信浏览器的返回上一页按钮也是同样情况）


Harmonyos Next教程
3 回复

你好，经过测试，没有发现你所说的问题。


您好，我在开发的时候也遇到了这个问题，然后我用官方vue3的示例https://vue3-hellouniapp.dcloud.net.cn/pages/API/choose-location/choose-location，也发现存在这个问题。

在处理 uni-app 中使用 Vue 3 时遇到的 chooseLocation API 的 Bug，首先需要确认你使用的 uni-app 和相关依赖库的版本是否最新，因为开发者社区和官方可能已经修复了已知的 Bug。同时，确保你遵循了正确的 API 使用方法。以下是一个基本的 chooseLocation 调用示例，并附上一些可能的错误处理代码。

示例代码

首先，确保在 manifest.json 中已经配置了相关的权限（如位置权限），然后在组件或页面中调用 chooseLocation。

<template>
  <view>
    <button @click="pickLocation">选择位置</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import uni from 'uni-app-api';

const location = ref(null);

const pickLocation = async () => {
  try {
    const result = await uni.chooseLocation({
      type: 'gcj02', // 坐标系，默认为 wgs84 返回 gps 原始坐标
      success: (res) => {
        console.log('选择位置成功：', res);
        location.value = res;
      },
      fail: (err) => {
        console.error('选择位置失败：', err);
      },
      complete: () => {
        console.log('选择位置完成');
      }
    });
  } catch (error) {
    console.error('调用 chooseLocation 时发生异常：', error);
    // 在这里可以添加一些全局的错误处理逻辑，比如显示错误提示等
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
button {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

错误处理

  1. 权限检查：确保应用已经获得位置权限。可以在调用 chooseLocation 前检查权限状态，并引导用户授权。

  2. 错误回调：在 fail 回调中处理具体的错误情况，比如用户拒绝授权或定位失败。

  3. 异常捕获：使用 try...catch 捕获调用 API 时可能抛出的异常，这有助于捕获一些非预期的错误。

  4. 日志记录：在开发阶段，详细记录日志可以帮助快速定位问题。

  5. 版本检查：确保 uni-app 和所有相关依赖都是最新版本，以避免已知的 Bug。

如果以上步骤仍然无法解决问题，建议查阅 uni-app 的官方文档和社区论坛，看看是否有其他开发者遇到并解决了相同的问题。如果问题依旧存在，可以考虑向 uni-app 的官方支持团队报告这个 Bug。

回到顶部