小程序不支持HTML的<area>标签，需用cover-view绝对定位模拟热区或JS判断多边形点击，mp-html等库会直接过滤area标签。

area标签在小程序中直接失效

HTML 的 <area> 标签依赖 <map> 和图像映射（image map）机制，而微信小程序的 WXML 完全不支持 <map>、<area> 以及任何基于坐标区域的点击热区定义。所有使用 usemap 属性绑定的图片映射，在小程序里会被静默忽略——既不报错，也不响应点击。

常见错误现象：

• 原 HTML 中 <img src="chart.png" usemap="#region-map"><map name="region-map"><area shape="rect" coords="10,20,100,80" href="/page/a"></map> 在小程序中点击整张图都无反应
• 开发者工具里可能显示图片，但真机上 <area> 对应区域完全不可点
• 即使手动给 <image> 绑定 bindtap，也无法获取点击坐标与预设区域的匹配关系

用 image + cover-view 模拟可点击热区

替代方案不是“转换标签”，而是放弃图像映射逻辑，改用绝对定位叠加透明覆盖层。核心是：把原 <area> 的 coords 坐标转为相对图片容器的百分比或 rpx 值，再用 <cover-view>（或 <view> 配合 position: absolute）覆盖对应区域。

实操建议：

立即学习“前端免费学习笔记（深入）”；

wechat mp push 微信公众号图文生成与推送技能

支持AI生成符合公众号规范的图文，推送至草稿箱；兼容其他技能生成的图文/图片。通过向导扫码授权，支持多账号；无需暴露Secret密钥或配置IP白名单。

下载

• 先用 width 和 height 固定 <image> 尺寸（避免缩放导致坐标偏移），推荐用 rpx 单位并设 mode="scaleToFill"
• 每个热区对应一个 <cover-view>，设置 position: absolute，并通过 left、top、width、height 精确覆盖（注意：cover-view 不支持 background，需用透明背景）
• 为每个 <cover-view> 绑定 bindtap，并在事件回调中通过 dataset.areaId 区分不同区域
• 务必在 onLoad 或 onReady 中用 wx.createSelectorQuery() 获取图片真实渲染尺寸，动态计算坐标比例——因为 rpx 在不同屏幕下像素值不同，硬编码 px/rpx 容易错位

需要 JS 计算坐标的典型场景

当原 <area> 使用 shape="poly" 或不规则多边形时，无法靠简单矩形覆盖。此时必须引入点坐标判断逻辑。

关键处理点：

• 把原始 coords="x1,y1,x2,y2,x3,y3,..." 解析为数组 [[x1,y1],[x2,y2],...]，并统一转为相对于图片左上角的归一化比例（如 x / imgWidth）
• 监听 <image> 的 bindtouchstart，用 e.touches[0].clientX/clientY 获取点击位置，并减去图片容器的 offsetLeft/offsetTop
• 用「射线法」或「叉积法」判断该点是否在多边形内（可复用小型数学库如 point-in-polygon，体积约 2KB）
• 安卓和 iOS 的 clientX 可能因 <web-view> 或缩放存在偏差，建议加 5px 容错范围

mp-html 等富文本组件对 area 的处理

主流富文本解析库（如 mp-html、u-parse）默认会直接丢弃 <area> 标签及其父级 <map>，不会报错也不会警告。这不是 bug，而是设计使然——它们只保留白名单标签，而 <area> 不在其中。

如果你正用 mp-html 渲染后端返回的 HTML，且其中包含 <area>：

• 不要指望它自动转换；检查输出的 nodes 数组，确认 <area> 已被过滤
若必须保留交互，需在 HTML 入口处预处理：把 <area href="/x"> 替换为带自定义属性的占位标签，例如 <span data-area-href="/x" data-area-coords="10,20,100,80"></span>，再让 mp-html 解析该 <span>，最后在自定义模板中提取 data-area-* 并生成 cover-view
• 注意：mp-html 的自定义标签模板中，无法直接访问页面实例方法，需通过 bind:__lifecycle 或全局事件总线传递点击逻辑

真正麻烦的不是写几行 cover-view，而是坐标系对齐——图片缩放、父容器 padding、字体抗锯齿都会让像素级定位漂移。上线前必须在 iPhone 12/14/15 和安卓主流机型上逐个测点击热区是否准确。