uni-app 微信小程序 map 组件 markers点过多导致 webviewScriptError 报错

uni-app 微信小程序 map 组件 markers点过多导致 webviewScriptError 报错

开发环境 版本号 项目创建方式
Windows WIN10 企业版 HBuilderX 
产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.3

第三方开发者工具版本号：1.05.2102010

基础库版本号：2.15.0

项目创建方式：HBuilderX

示例代码：

```html
<map scale="11" [@updated](/user/updated)="onUpdated" [@tap](/user/tap)="onTapMap" [@callouttap](/user/callouttap)="onCallouttap" id="map" ref="map"  
     :markers="mapList"  
     style="width: 100%; height:100%;" :latitude="param.latitude" @regionchange="onRegionchange"  
     :longitude="param.longitude">  
  <cover-view slot="callout">  
    <cover-view v-if="isShowCallout">  
      <cover-view v-for="item in calloutList" class="custom-callout-box flex fx-ver fx-pac"  
                  :class="{'active':item.is_node===1}" :marker-id="item.id"  
                  :key="item.id">  
        <cover-view class="custom-callout flex fx-pac ophide" :class="{'active':isShowCallout}">  
          <cover-view class="custom-callout-icon flex fx-pac">  
            <cover-image src="/static/images/jd-icon.png" mode="widthFix" v-if="item.is_node===1"></cover-image>  
            <cover-image src="/static/images/pt-icon.png" mode="widthFix" v-else></cover-image>  
          </cover-view>  
          <cover-view class="custom-callout-title pl10 pr15 cff fz20">{{  
              item.title  
            }}</cover-view>  
        </cover-view>  
        <cover-view class="custom-callout-line ophide" :class="{'active':isShowCallout}"></cover-view>  
      </cover-view>  
    </cover-view>  
  </cover-view>  
</map>

操作步骤：

  • 打开小程序请求接口获取markers点

预期结果：

  • 能正常显示 不报webviewScriptError错

实际结果：

  • 不能正常显示 且报错webviewScriptError错

bug描述：

  • 微信小程序 map 组件 markers点过多报错：webviewScriptError，请下载附件运行测试

更多关于uni-app 微信小程序 map 组件 markers点过多导致 webviewScriptError 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 微信小程序 map 组件 markers点过多导致 webviewScriptError 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是微信小程序map组件的性能限制问题。当markers数量过多时(通常超过1000个点)，会导致webview内存溢出而报错webviewScriptError。

解决方案：

  1. 分页加载markers，只显示当前可视区域内的点
  2. 使用聚合点(cluster)技术减少显示的点数量
  3. 优化markers数据结构，减少不必要的属性
  4. 降低markers的icon图片复杂度

具体实现建议：

  1. 监听regionchange事件，动态加载当前区域的markers
onRegionchange(e) {
  if(e.type === 'end') {
    // 获取当前地图边界
    this.mapCtx = uni.createMapContext('map', this)
    this.mapCtx.getRegion({
      success: res => {
        // 根据边界筛选要显示的markers
      }
    })
  }
}
  1. 使用第三方库如wxMarkerClusterer实现点聚合
import WxMarkerCluster from '@/utils/wxMarkerClusterer'

// 初始化聚合
this.cluster = new WxMarkerCluster({
  mapId: 'map',
  markers: this.mapList,
  // 其他配置
})
  1. 精简markers数据结构，只保留必要字段
this.mapList = rawData.map(item => ({
  id: item.id,
  latitude: item.lat,
  longitude: item.lng,
  // 其他必要字段
}))
回到顶部