操作步骤：

这个是uniapp代码

<template>
<view class="container">
<cover-text class="address">test</cover-text>
<cover-text class="address">{{ func }}</cover-text>
<cover-text class="address">{{ address }}</cover-text>
<camera
id="myCamera"
mode="normal"
binderror="onCameraError"

</camera>

<canvas  
  class="canvas"  
  canvas-id="myCanvas"  
  style="width: 300px; height: 300px"  
></canvas>  
<cover-view class="bottomArea">  
  <view class="circle" @click="takePhoto">  
    <view class="inCircle"></view>  
  </view>  
</cover-view>  

</view>
</template>

<script setup>

import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app"

const photo = ref(null);
const address = ref(null);
const func = ref(null);

const onCameraError = (error) => {
console.log('==errorerror==================================');
console.log(error);
console.log('====================================');
}

const takePhoto = () => {
const cameraContext = uni.createCameraContext(this);
cameraContext.takePhoto({
quality: "high",
success: (res) => {
photo.value = res.tempImagePath; // 更新照片
console.log('====================================');
console.log(photo.value);
console.log('====================================');
},
fail: (error) => {
address.value = error;
console.error("Take photo failed:", error);
}
});
};

onLoad(() => {
func.value = uni.getLocation;
uni.getLocation && uni.getLocation({
// altitude: true,
// geocode: true,
success: (res) => {
console.log('=resres===================================');
console.log(res);
console.log('====================================');
address.value = res;
},
fail: (error) => {
address.value = error;
console.log('==errorerror==================================');
console.log(error);
console.log('====================================');
}
})
})

</script>

<style lang="scss" scoped>
.container {
position: relative;
height: 100vh; / 确保占满整个屏幕 /
.address{
// position: fixed;
width: 100vh;
left: 0;
top: 0;
z-index: 100;
color: red;
height: 500rpx;
word-break:break-all;
word-wrap: break-word;
}
.canvas {
position: fixed;
z-index: 1;
}
.bottomArea {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 180rpx;
display: flex;
align-items: center;
justify-content: center;
z-index: 12;
background: #000;
.circle {
width: 120rpx;
height: 120rpx;
background: transparent;
border: 2rpx solid #fff;
box-sizing: border-box;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.inCircle {
box-sizing: border-box;
width: 100rpx;
height: 100rpx;
background: #fff;
border-radius: 50%;
}
}
}

myCamera {

width: 100vw;  
height: calc(100vh - 80rpx);  
position: relative;  
z-index: 10;  

}
}
</style>

预期结果：

正常使用就行

实际结果：

正常使用就行