uni-app map组件api绘制多边形出现多余重复图形

uni-app map组件api绘制多边形出现多余重复图形

类别 信息
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 10.15.6
HBuilderX类型 正式
HBuilderX版本 3.5.4
手机系统 全部
手机厂商 华为
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

模拟器可复现，与机型无关

示例代码：

代码见附件

操作步骤：

运行demo后首页展现，拖动地图可复现问题

预期结果：

无多余图形

实际结果：

有多余图形出现

bug描述：

根据map组件api绘制多边形有多余三角形，地图滑动时三角形闪现，详见问题视频及图片，demo代码


更多关于uni-app map组件api绘制多边形出现多余重复图形的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

我看了一下，这个应该是您设置的point点并不是相邻的，造成了形成一个不规则图形，建议调整一下points是相邻位置。

更多关于uni-app map组件api绘制多边形出现多余重复图形的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的 谢谢

这是一个已知的uni-app地图组件绘制多边形时的常见问题。主要原因是地图组件在渲染多边形时，有时会重复绘制路径点导致出现多余图形。

解决方法如下：

  1. 检查多边形路径点数组，确保没有重复的点
  2. 在绘制多边形前先清除之前的覆盖物
this.mapCtx.removeOverlay({
  id: 'polygonId'
})
  1. 使用setTimeout延迟绘制，避免地图未完全加载时绘制
setTimeout(() => {
  this.mapCtx.addGroundOverlay({
    id: 'polygonId',
    points: polygonPath,
    color: '#FF0000',
    width: 2,
    fillColor: '#FF000033'
  })
}, 300)
回到顶部