uni-app uni.chooseLocation接口界面未全屏

uni-app uni.chooseLocation接口界面未全屏

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 14.3.1
开发工具 HBuilderX
工具版本号 4.17
手机系统 iOS
手机版本号 iOS 17
手机厂商 模拟器
手机机型 iphone13 pro
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

  • 调用uni.chooseLocation接口

预期结果:

  • 调用uni.chooseLocation接口出来的地图要求全屏

实际结果:

  • 调用uni.chooseLocation接口出来的地图只显示一部分

bug描述:

  • 调用uni.chooseLocation接口出来的界面没有全屏

图像


更多关于uni-app uni.chooseLocation接口界面未全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni.chooseLocation接口界面未全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni-app 中使用 uni.chooseLocation 接口时,默认情况下,地图选择界面可能不会全屏显示。如果你希望地图选择界面全屏显示,可以通过以下方式进行设置:

1. 使用 uni.chooseLocationsuccess 回调

success 回调中,你可以手动调整地图窗口的大小或全屏显示。

uni.chooseLocation({
  success: function (res) {
    console.log('位置名称:' + res.name);
    console.log('详细地址:' + res.address);
    console.log('纬度:' + res.latitude);
    console.log('经度:' + res.longitude);
  },
  fail: function (err) {
    console.log(err);
  }
});

2. 使用 uni.navigateTouni.redirectTo

如果你希望自定义地图选择界面,可以使用 uni.navigateTouni.redirectTo 跳转到一个自定义的全屏页面,然后在该页面中使用地图组件(如 map 组件)来实现地图选择功能。

uni.navigateTo({
  url: '/pages/fullscreenMap/fullscreenMap'
});

fullscreenMap 页面中,你可以使用 map 组件来实现地图功能。

<template>
  <view class="map-container">
    <map
      id="map"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      @regionchange="regionchange"
      style="width: 100%; height: 100vh;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.90469,
      longitude: 116.40717,
      markers: [
        {
          id: 1,
          latitude: 39.90469,
          longitude: 116.40717,
          name: '北京'
        }
      ]
    };
  },
  methods: {
    regionchange(e) {
      console.log('地图区域变化', e);
    }
  }
};
</script>

<style>
.map-container {
  width: 100%;
  height: 100vh;
}
</style>
回到顶部