更新记录

2.0（2025-08-06）下载此版本

1.修复标签溢出屏幕的问题 2.区域支持自定义文字了~ 3.新增在线绘图网址，不再为频繁修改坐标而痛苦~ 4.新增内置闪烁类名

1.0（2025-05-30）下载此版本

1.适配微信小程序、H5、抖音小程序差label适配中 2.自定义区域名称开发中

平台兼容性

uni-app(4.07)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	×	√	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	-	√	√	√	√	√	√	√	-	-	-

其他

多语言	暗黑模式	宽屏模式	蒸汽模式
√	×	√	×

MapImgMarker 地图绘标

项目概览

RmRegionImg 是一款轻量且灵活的跨端区域标记组件，支持在图片上绘制多边形区域、添加自定义标记点及标签，适配微信小程序、H5、抖音小程序等多端场景，适用于园区、校园、农田等地点区域可视化标记需求。

可以在图片中绘制多边形，控制多边形的背景、边框、颜色、markers图标，图标labes等，适配微信小程序、H5、抖音小程序等。适用于公园、学校、农田地点区域标记。

天地图还在开发中，目前仅支持传入图片做为地图绘制区域和图标标记。

建议及反馈请发送邮箱:1940787338@qq.com

核心功能

1. 区域可视化标记
- 多边形绘制：通过坐标点定义区域，支持边框颜色、填充透明度等样式自定义
- 标记点增强：支持图标、悬浮标签、动态类名（如闪烁效果），覆盖设备 / 地点标记场景
2. 跨端适配优势
- 一套组件代码，兼容 微信小程序、H5、抖音小程序
- 图片 / 图标支持网络 / 本地路径，适配不同项目资源管理方式
3. 高效配置流程
- 可视化绘图工具：通过在线绘制平台生成坐标配置，无需手动计算坐标
- 配置项自动生成：绘制完成后直接导出 lines markers 数据，快速接入项目

绘图网址

[绘制地图](https://map.draw.mbytt.love/)

注意：！！！

如果你不知道坐标点如何给，请访问链接中进行绘制，绘制完成后点击完成之后，会直接生成数据配置项，复制过来即可。

快速开始

1.导入组件，并且在template中使用

<RmRegionImg :lines="lines" :markers="markers" :imgConfig="imgConfig"></RmRegionImg>
<script>
    import RmRegionImg from '@/components/rm-regionImg/rm-regionImg'
    export default {
        components: {
            RmRegionImg
        },
        data() {
            return {
                imgConfig:{
                    url: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/gfy/gy.png',
                    width: 1235,
                    height: 737,
                },
                markers: [
                    {
                        id: 1,
                        labels:['设备名称:工业篮球场', '使用时间:2025年6月'],
                        coorX: 336.609908,
                        coorY: 737 - 401.041064,
                        iconSize: 15,
                        className: 'flicker',
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png'
                    },
                    {
                        id: 2,
                        labels:['设备名称:北门摄像头', '设备编号:5b890b1aa6daa6dd'],
                        coorX: 436.053212,
                        coorY: 737 - 559.018306,
                        iconSize: 16,
                        iconUrl: '/static/img/camera.png'
                    },
                    {
                        id: 3,
                        labels:['设备名称:南门摄像头', '设备编号:5b890b1aa6daa6dd'],
                        coorX: 707.609929,
                        coorY: 737 - 101.64871,
                        iconSize: 16,
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/gfy/lookYou.png'
                    },
                    {
                        id: 4,
                        labels:['地点名称:桃李园餐厅'],
                        coorX: 706.335015,
                        coorY: 737 - 333.518533,
                        iconSize: 16,
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png'
                    },
                    {
                        id: 5,
                        labels:['设备名称:南门摄像头', '设备编号:5b890b1aa6daa6dd'],
                        coorX: 462.82641,
                        coorY: 737 - 294.024222,
                        iconSize: 16,
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png'
                    },
                    {
                        id: 6,
                        labels:['设备名称:南门摄像头', '设备编号:5b890b1aa6daa6dd'],
                        coorX: 942.194135,
                        coorY: 737 - 483.851715,
                        iconSize: 16,
                        iconUrl: 'https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png'
                    },
                ],
                lines:[
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 220.592719, coorY: 737 - 590.868556 }, 
                        { coorX: 243.541174, coorY: 737 - 83.81257 },
                        { coorX: 1060.761152, coorY: 737 - 116.93683 },
                        { coorX: 1064.585894, coorY: 737 - 598.512617 },
                        { coorX: 220.592719, coorY: 737 - 590.868556 },
                      ],
                      style: {
                          color: '#3388ff',
                          fillColor: '#3388ff',
                          fillOpacity: 0.2,
                          fill: false,
                          width: 3
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 272.864199, coorY: 737 - 472.385625 }, 
                        { coorX: 267.764543, coorY: 737 - 319.504423 },
                        { coorX: 414.379672, coorY: 737 - 324.600463 },
                        { coorX: 415.654586, coorY: 737 - 481.303695 },
                        { coorX: 272.864199, coorY: 737 - 472.385625 },
                      ],
                      style: {
                          color: '#16DD20',
                          fillColor: '#16DD20',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 483.225036, coorY: 737 - 543.730186 }, 
                        { coorX: 484.49995, coorY: 737 - 402.315074 },
                        { coorX: 671.912332, coorY: 737 - 404.863094 },
                        { coorX: 677.011989, coorY: 737 - 553.922266 },
                        { coorX: 483.225036, coorY: 737 - 543.730186 },
                      ],
                      style: {
                          color: '#3388ff',
                          fillColor: '#3388ff',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 256.290315, coorY: 737 - 262.173972 }, 
                        { coorX: 261.389972, coorY: 737 - 105.47074 },
                        { coorX: 410.554929, coorY: 737 - 111.84079 },
                        { coorX: 409.280015, coorY: 737 - 265.996002 },
                        { coorX: 256.290315, coorY: 737 - 262.173972 }, 
                      ],
                      style: {
                          color: '#B3D020',
                          fillColor: '#B3D020',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 739.482783, coorY: 737 - 547.552216 }, 
                        { coorX: 733.108212, coorY: 737 - 402.315074 },
                        { coorX: 893.747397, coorY: 737 - 402.315074 },
                        { coorX: 886.097912, coorY: 737 - 551.374246 },
                        { coorX: 739.482783, coorY: 737 - 547.552216 }, 
                      ],
                      style: {
                          color: '#DF1FE2',
                          fillColor: '#DF1FE2',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 733.108212, coorY: 737 - 313.134373 }, 
                        { coorX: 731.833298, coorY: 737 - 122.03287 },
                        { coorX: 883.548083, coorY: 737 - 128.40292 },
                        { coorX: 880.998255, coorY: 737 - 323.326453 },
                        { coorX: 733.108212, coorY: 737 - 313.134373 }, 
                      ],
                      style: {
                          color: '#0EBBEB',
                          fillColor: '#0EBBEB',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                    {
                      type: 'Polygon',
                      lineList: [
                        { coorX: 430.953556, coorY: 737 - 251.981892 }, 
                        { coorX: 433.503384, coorY: 737 - 123.30688 },
                        { coorX: 677.011989, coorY: 737 - 124.58089 },
                        { coorX: 674.462161, coorY: 737 - 282.558132 },
                        { coorX: 430.953556, coorY: 737 - 251.981892 }, 
                      ],
                      style: {
                          color: '#C20664',
                          fillColor: '#C20664',
                          fillOpacity: 0.2,
                          fill: true,
                          width: 2
                      }
                    },
                ]
            }
        },
    }
</script>

组件说明

props

        props: {
            imgConfig: {
                type: Object,
                required: true,
                default: () => ({})
            },
            markers: {
                type: Array,
                default: () => []
            },
            lines: {
                type: Array,
                default: () => []
            },
            useUvLoadMarker: {
                type: Boolean,
                default: false
            },
        },

imgConfig（图片配置）

属性	说明	类型	默认值	是否必须
url	图片链接	string	''	是
width	图片宽度	number	undefined	是
height	图片高度	number	undefined	是

markers（图标配置）

属性	说明	类型	默认值	是否必须
id	唯一标识，不可相同	number	undefined	是
labels	图标上方的标签	Array	[]	否
coorX	图标相对于图片的X轴	number	undefined	是
coorY	图标相对于图片的Y轴	number	undefined	是
iconSize	图标大小	number	16	否
className	自定义类名	string	无	否
iconUrl	图标路径，支持网络路径和本地，不支持base64	string	默认图标	否

lines（线、面、区域配置）

属性	说明	类型	默认值	是否必须
type	线的类型，目前只支持多边形绘制	string	'Polygon'	是
lineList	线框坐标(多个)，起始点必须和结尾闭合形成闭环	Array	[]	是
style	线的样式	Object	{}	是

lineList（线框坐标）

属性	说明	类型	默认值	是否必须
coorX	线的当前点相对于图片的X	number	undefined	是
coorY	线的当前点相对于图片的Y	number	undefined	是

style（线的样式）

属性	说明	类型	默认值	是否必须
color	线框的颜色，目前仅支持16进制	string	undefined	是
fillColor	框选区域的背景颜色，目前仅支持16进制	string	undefined	是
fillOpacity	背景透明度范围:[0-1]	number	{}	是
fill	是否需要填充	boolean	true	否
width	线的宽度	number	2	否

lineLabel（当前闭合区域内的文本及样式）

属性	说明	类型	默认值	是否必须
text	闭合线区域内的文本	string	undefined	否
color	文本颜色	string	#000	否
size	文本大小	number	16	否
x	位于闭合区域的位置	number	50	否
y	位于闭合区域的位置	number	50	否
show	是否展示	boolean	false	否

useUvLoadMarker（是否使用v-view组件来加载图标，可以拥有更好的性能）

备注说明：

目前绘制线框和图标，都是以图片左上角为起始点。

Events

事件名称	说明	回调参数
resize	计算图片显示尺寸以及距离顶部的距离	(width,height,scaleRatio)
imageLoad	图片加载完成
markerClick	图标被点击	(marker)

内置类名

marker可以在传入组件时自定义类名使用已有的内置类名

类名	作用
flicker	闪烁

图片、天地图Map、图片做地图、划区域标点、仿Leaflet功能地图 Map 天地图 划区 标记

更新记录

2.0（2025-08-06）下载此版本

1.0（2025-05-30）下载此版本

平台兼容性

uni-app(4.07)

其他

MapImgMarker 地图绘标

项目概览

核心功能

1. 区域可视化标记

2. 跨端适配优势

3. 高效配置流程

绘图网址

快速开始

1.导入组件，并且在template中使用

组件说明

props

imgConfig（图片配置）

markers（图标配置）

lines（线、面、区域配置）

lineList（线框坐标）

style（线的样式）

lineLabel（当前闭合区域内的文本及样式）

useUvLoadMarker（是否使用v-view组件来加载图标，可以拥有更好的性能）

Events

内置类名

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

图片、天地图Map、图片做地图、划区域标点、仿Leaflet功能

图片、天地图Map、图片做地图、划区域标点、仿Leaflet功能 地图 Map 天地图 划区 标记

更新记录

2.0（2025-08-06） 下载此版本

1.0（2025-05-30） 下载此版本

平台兼容性

uni-app(4.07)

其他

MapImgMarker 地图绘标

项目概览

核心功能

1. 区域可视化标记

2. 跨端适配优势

3. 高效配置流程

绘图网址

快速开始

1.导入组件，并且在template中使用

组件说明

props

imgConfig（图片配置）

markers（图标配置）

lines（线、面、区域配置）

lineList（线框坐标）

style（线的样式）

lineLabel（当前闭合区域内的文本及样式）

useUvLoadMarker（是否使用v-view组件来加载图标，可以拥有更好的性能）

Events

内置类名

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

图片、天地图Map、图片做地图、划区域标点、仿Leaflet功能

Modal title

图片、天地图Map、图片做地图、划区域标点、仿Leaflet功能地图 Map 天地图划区标记

2.0（2025-08-06）下载此版本

1.0（2025-05-30）下载此版本