HTML中如何为imagemap（图像映射）的指定区域填充颜色

你现有项目是基于Bootstrap+jQuery的技术栈，以下提供两种可落地的实现方式：

方案1：改用SVG矢量地图（更推荐，维护成本更低） #

SVG原生支持路径样式修改，是区域上色需求的最优选择，实现步骤如下：

• 将你现有的PNG格式地图转成矢量SVG格式，提取每个区县的边界为独立的<path>标签，给每个<path>添加唯一id或class标识对应区县
• 直接把SVG代码嵌入到你的HTML页面中，无需通过img标签引入，即可通过CSS直接控制每个区县的填充样式
  示例代码如下：

<!-- 嵌入SVG地图，viewBox属性值和你原始地图的宽高尺寸保持一致 -->
<svg id="districtMap" width="100%" viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
  <!-- 朝阳区对应路径 -->
  <path id="chaoyang" d="M10,20 L30,40.... 你提取的路径数据" stroke="#fff" stroke-width="1" />
  <!-- 海淀区对应路径 -->
  <path id="haidian" d="M50,60 L70,80.... 你提取的路径数据" stroke="#fff" stroke-width="1" />
  <!-- 其余区县路径依次添加 -->
</svg>

你可以直接通过CSS修改每个区县的填充色：

/* 给朝阳区填充红色 */
#chaoyang {
  fill: #ff4444;
}
/* 给海淀区填充绿色 */
#haidian {
  fill: #00C851;
}
/* 可选：添加鼠标悬停效果 */
path:hover {
  fill: #ffbb33;
  cursor: pointer;
}

如果需要绑定交互事件，直接用jQuery操作即可：

$('#chaoyang').on('click', function() {
  // 自定义点击后的业务逻辑
})

方案2：基于现有PNG地图+ImageMap实现（无需修改地图素材） #

如果你不想修改现有地图素材，可以通过ImageMap加高亮插件实现区域上色：

• 首先获取每个区县区域的坐标数据，通过图像映射标注工具上传你的PNG地图，圈选每个区县生成对应的<area>标签坐标
• 自行获取适配jQuery的maphilight插件源码，下载到本地引入到项目中
  示例代码如下：

<div style="position: relative;">
  <img src="本地地图存储路径" id="districtImg" usemap="#districtMap" class="img-fluid">
  <map name="districtMap">
    <!-- 朝阳区对应区域，fillColor设置填充色，fillOpacity设置透明度 -->
    <area shape="poly" coords="你生成的坐标串" href="#" data-maphilight='{"fillColor":"ff4444","fillOpacity":0.6}'>
    <!-- 海淀区对应区域 -->
    <area shape="poly" coords="你生成的坐标串" href="#" data-maphilight='{"fillColor":"00C851","fillOpacity":0.6}'>
    <!-- 其余区县区域依次添加 -->
  </map>
</div>

页面加载完成后初始化插件即可生效：

$(function() {
  $('#districtImg').maphilight();
})

你可以直接修改每个<area>标签data-maphilight属性中的fillColor值，即可修改对应区县的填充颜色。

内容的提问来源于stack exchange，提问作者shrcod