uni-app nvue页面加载map卡住

uni-app nvue页面加载map卡住

开发环境 版本号 项目创建方式
Windows win10 20H2 家庭版 HBuilderX 
### 操作步骤：
```html
<map style="flex: 1;" :longitude="center.longitude" :latitude="center.latitude" :markers="markers" :polygons="polygons" :polyline="lines" [@tap](/user/tap)="clickMap"></map>

预期结果：

加载线和面时不卡住APP

实际结果：

APP会被卡住7-8秒

bug描述：

this.polygons length: , [Number] 373
this.lines length: , [Number] 982
加载373个面和982个线后整个APP卡住，需要7-8秒才能恢复。这个有解决的方法不。该面和线是由高精地图的geojson转换过来

更多关于uni-app nvue页面加载map卡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

你这加载的地图元素太多了。机能能跟不上！只能减少地图元素 没有其他办法

更多关于uni-app nvue页面加载map卡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我就是怕机器性能不好，测试了一下，使用原生的高德SDK，高精地图加载瞬间加载完成，但使用uniapp需要7-8秒，然后使用荣耀V30PRO打开uniapp，也需要2秒才能打开，这得多高的配置才能压到1秒内打开

回复 4***@qq.com: 你原生项目测试有加载了373个polygons 和982个lines了吗 瞬间完成？

在nvue页面加载大量地图覆盖物（如373个多边形和982条折线）时出现卡顿是常见性能问题。主要原因在于：

  1. 渲染压力过大：每个覆盖物都需要单独创建原生视图对象，大量对象同时渲染会阻塞UI线程。

  2. 数据转换开销：从GeoJSON转换到地图组件数据结构的过程可能消耗大量计算资源。

解决方案：

  1. 数据分片加载：
// 分批加载覆盖物
loadDataInBatches(data, batchSize = 50) {
    for (let i = 0; i < data.length; i += batchSize) {
        const batch = data.slice(i, i + batchSize)
        setTimeout(() => {
            this.addToMap(batch)
        }, i * 50) // 分批延迟加载
    }
}
  1. 简化几何数据：
  • 在转换GeoJSON时减少多边形顶点数量
  • 合并相邻或重叠的几何图形
  • 使用更简化的LOD（细节层次）策略
  1. 使用地图组件优化属性：
<map 
    :show-location="false"
    :enable-traffic="false"
    :enable-poi="false"
    :enable-building="false"
>
回到顶部