SVG伊朗地图多分支信息展示问题：点击省份显示多行分支数据

核心修改方向 #

把原有的单分支MapItem结构改成支持多分支数组，同时实现点击省份后自动以两列布局渲染所有分支（兼容0条、1条、N条分支的场景）。

具体实现步骤 #

1. 重构MapItem类，适配多分支数据 #

将原来的单分支参数替换为分支数组，每个分支包含name（分支名称）和info（分支信息）两个字段：

class MapItem {
  constructor(id, name, branches = []) {
    this.id = id;
    this.name = name;
    this.branches = branches; // 存储多条分支的数组
  }
}

2. 重新定义省份数据示例 #

按新结构配置不同分支数量的省份：

// 德黑兰省（5条分支）
const tehran = new MapItem('tehran', 'استان تهران', [
  {name: 'شعبه مرکزی تهران', info: 'آدرس: خیابان ولیعصر، شماره ۱۲۳'},
  {name: 'شعبه شمال تهران', info: 'آدرس: خیابان لاله زار، شماره ۴۵'},
  {name: 'شعبه جنوب تهران', info: 'آدرس: خیابان آزادی، شماره ۶۷'},
  {name: 'شعبه شرق تهران', info: 'آدرس: خیابان بهارستان، شماره ۸۹'},
  {name: 'شعبه غرب تهران', info: 'آدرس: خیابان انقلاب، شماره ۱۰۱'}
]);

// 无分支的省份示例
const noBranchProvince = new MapItem('yazd', 'استان یزد');

// 单分支的省份示例
const ardabil = new MapItem('ardabil', 'استان اردبیل', [
  {name: 'شعبه اصلی اردبیل', info: 'آدرس: خیابان امام خمینی، شماره ۲۴'}
]);

3. 修改点击事件的渲染逻辑 #

替换原有的单条信息渲染代码，生成自适应两列的布局：

// 渲染分支信息的核心函数
function renderBranchInfo(mapItem) {
  const infoContainer = document.getElementById('branch-info');
  infoContainer.innerHTML = '';

  // 渲染省份标题
  const provinceTitle = document.createElement('h3');
  provinceTitle.textContent = mapItem.name;
  infoContainer.appendChild(provinceTitle);

  // 处理无分支的情况
  if (mapItem.branches.length === 0) {
    const emptyText = document.createElement('p');
    emptyText.textContent = 'این استان هیچ شعبه‌ای ندارد.';
    infoContainer.appendChild(emptyText);
    return;
  }

  // 创建两列网格容器
  const gridWrapper = document.createElement('div');
  gridWrapper.style.cssText = `
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-top: 1rem;
  `;

  // 循环生成每个分支的卡片
  mapItem.branches.forEach(branch => {
    const branchCard = document.createElement('div');
    branchCard.style.cssText = `
      padding: 1rem;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      background-color: #f9f9f9;
    `;

    const branchName = document.createElement('h4');
    branchName.textContent = branch.name;
    branchName.style.margin = '0 0 0.5rem 0';

    const branchDesc = document.createElement('p');
    branchDesc.textContent = branch.info;
    branchDesc.style.margin = '0';

    branchCard.appendChild(branchName);
    branchCard.appendChild(branchDesc);
    gridWrapper.appendChild(branchCard);
  });

  infoContainer.appendChild(gridWrapper);
}

// 绑定省份点击事件（假设SVG省份元素带有data-id属性）
document.querySelectorAll('svg [data-id]').forEach(provinceEl => {
  provinceEl.addEventListener('click', () => {
    const provinceId = provinceEl.getAttribute('data-id');
    // 假设所有省份数据存在provinceMap对象中
    const targetProvince = provinceMap[provinceId];
    if (targetProvince) {
      renderBranchInfo(targetProvince);
    }
  });
});

4. 整合省份数据到统一对象 #

方便点击时快速匹配对应数据：

const provinceMap = {
  'ardabil': ardabil,
  'tehran': tehran,
  'yazd': noBranchProvince,
  // 其他省份数据...
};

效果说明 #

• 无分支省份：显示提示文本“این استان هیچ شعبه‌ای ندارد.”
• 单分支省份：自动以单列展示分支卡片
• 多分支省份：按两列布局排列，超过2条时自动换行

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