如何使用jQuery maphilight实现点击切换高亮色的营地预订交互地图功能

AI 小北

2026-9-27

交互式露营地预订地图选中效果实现方案

基于你使用的maphilight库，按照以下步骤操作即可实现点击切换选中高亮的效果：

第一步：给所有可用（绿色未预订）的<area>标签添加两个自定义属性，方便后续逻辑判断
示例标签结构：
```
<area shape="poly" coords="xxx,xxx,xxx" href="#" data-available="true" data-selected="false" alt="营地A">
```
其中data-available="true"标记为可预订地块，data-selected="false"为默认未选中状态。

第二步：在页面中添加如下jQuery代码，放在</body>标签之前即可

$(function() {
  // 初始化maphilight基础配置，可根据你的原有配置调整参数
  $('img[usemap]').maphilight({
    fill: true,
    fillOpacity: 0.6,
    stroke: true,
    strokeColor: '000000',
    strokeOpacity: 0.8
  });

  // 给所有可预订地块绑定点击事件
  $('area[data-available="true"]').on('click', function(e) {
    e.preventDefault(); // 阻止点击area默认跳转行为
    const $area = $(this);
    const isSelected = $area.data('selected');
    
    // 切换选中状态
    $area.data('selected', !isSelected);
    
    // 根据状态设置高亮颜色
    if (!isSelected) {
      // 选中状态：黄色高亮
      $area.data('maphilight', {
        fillColor: 'FFFF00',
        alwaysOn: true
      });
    } else {
      // 取消选中：恢复绿色可用状态
      $area.data('maphilight', {
        fillColor: '00FF00',
        alwaysOn: true
      });
    }
    // 触发maphilight更新渲染
    $area.trigger('alwaysOn.maphilight');
  });
});

第三步：参数调整说明
如果需要修改选中颜色、透明度等效果，直接调整对应fillColor（十六进制颜色码，不带#前缀）、fillOpacity（透明度，取值范围0-1）的参数值即可。
已预订的红色地块不需要添加data-available="true"属性，不会触发上述点击逻辑，可避免用户误选。