能否使用maphilight插件高亮双地图中同class属性的区域？

当然可以实现！我之前帮不少开发者解决过类似的双地图同步高亮需求，用maphilight插件完全能达成你想要的类似单地图groupBy的效果，具体步骤如下：

1. 先确保两张地图的对应区域Class匹配 #

首先，你需要给两张地图里对应相同区域的<area>标签加上完全一致的Class名，比如第一张地图里代表纽约的区域加class="region-ny"，第二张地图里的纽约区域也要加同样的class="region-ny"。这是同步的核心标识，插件靠这个来关联两张地图的对应区域。

2. 初始化两张地图的maphilight #

先给两张地图的<img>标签都初始化maphilight，你可以统一给它们加一个通用Class（比如map-image），然后用一段代码批量初始化：

// 初始化所有地图的maphilight，可自定义高亮样式
$('.map-image').maphilight({
  fillColor: '#ff6b6b',
  fillOpacity: 0.3,
  strokeColor: '#fff',
  strokeWidth: 2
});

3. 编写同步高亮的事件逻辑 #

核心思路是：监听任意一张地图里<area>的鼠标事件（mouseover/mouseout），当事件触发时，找到另一张地图里拥有相同Class的<area>，手动触发对应的高亮/取消高亮事件。

直接上可用的代码：

// 监听所有area的鼠标移入移出事件
$('area').on('mouseover mouseout', function(e) {
  // 获取当前触发事件的area的Class
  const targetClass = $(this).attr('class');
  // 筛选出另一张地图里同Class的area，排除当前触发元素避免循环触发
  const matchingAreas = $('area.' + targetClass).not(this);

  if (e.type === 'mouseover') {
    // 给匹配的区域触发鼠标移入，实现同步高亮
    matchingAreas.trigger('mouseover');
  } else {
    // 给匹配的区域触发鼠标移出，取消同步高亮
    matchingAreas.trigger('mouseout');
  }
});

4. 可选：添加点击保持高亮的功能 #

如果需要实现点击某区域后，两张地图的对应区域都保持高亮（类似选中效果），可以再加一段扩展代码：

let activeRegionClass = '';

$('area').on('click', function() {
  // 获取当前点击区域的Class
  activeRegionClass = $(this).attr('class');
  
  // 先清除所有区域的高亮状态
  $('area').maphilight({ off: true });
  
  // 给所有同Class的区域设置高亮
  $('area.' + activeRegionClass).maphilight({ on: true });
});

这样调整后，当你hover或点击其中一张地图的某个区域时，另一张地图里的对应区域会同步出现高亮效果，完全满足你想要的类似单地图groupBy的功能。

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