uni-app vue3+vite+nvue map地图铺不满

uni-app vue3+vite+nvue map地图铺不满

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

示例代码：

    <map class="map_box" style="height: 100vh;" :longitude="longitude" :latitude="latitude" :scale="scale" :rotation="rotation"  
        :skew="skew" :markers="markers" :polyline="polyline" :circles="circles" :buildings="buildings"  
        :enable-3D="is3DEnabled" enable-overlooking enable-zoom enable-scroll enable-rotate enable-building  
        show-location show-compass @regionchange="handleRegionChange" @markertap="handleMarkerTap"  
        @callouttap="handleCalloutTap">  
        <!-- 自定义 3D 按钮（仿原生样式） -->  
        <view class="custom-3d-button" @click="toggle3D">  
            呵呵呵呵呵呵呵  
            {{ is3DEnabled ? '2D' : '3D' }}  
        </view>  
    </map>

操作步骤：

  • nvue使用map地图就铺不满 vue就可以

预期结果：

    <map class="map_box" style="height: 100vh;" :longitude="longitude" :latitude="latitude" :scale="scale" :rotation="rotation"  
        :skew="skew" :markers="markers" :polyline="polyline" :circles="circles" :buildings="buildings"  
        :enable-3D="is3DEnabled" enable-overlooking enable-zoom enable-scroll enable-rotate enable-building  
        show-location show-compass @regionchange="handleRegionChange" @markertap="handleMarkerTap"  
        @callouttap="handleCalloutTap">  
        <!-- 自定义 3D 按钮（仿原生样式） -->  
        <view class="custom-3d-button" @click="toggle3D">  
            呵呵呵呵呵呵呵  
            {{ is3DEnabled ? '2D' : '3D' }}  
        </view>  
    </map>高度设置100vh 应该铺满
`

更多关于uni-app vue3+vite+nvue map地图铺不满的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

nvue 不支持vh单位

更多关于uni-app vue3+vite+nvue map地图铺不满的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue中使用map组件时，设置height: 100vh可能无法铺满屏幕，这是nvue布局机制与vue页面的差异导致的。

建议改用flex布局实现全屏：

.map_box {
  flex: 1;
}

或者在页面根元素设置：

page {
  height: 100%;
}
.map_box {
  height: 100%;
}

nvue采用原生渲染，对CSS支持与vue页面不同。flex: 1能确保map组件填满剩余空间。如果页面有其他元素，需要合理设置flex-direction和整体布局结构。

检查父容器高度，确保没有padding、margin影响布局。使用绝对定位也可作为备选方案：

.map_box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
回到顶部