如何将使用infobubble.js的谷歌地图应用相关功能迁移到Leaflet？

Leaflet原生Popup支持插入任意HTML内容，无需额外找专门的地图插件即可实现原infobubble的标签页效果，以下是两种可直接落地的实现方式：

方案1：无依赖纯JS实现（无需引入jQuery/其他框架） #

直接把标签页结构嵌入Popup内容，搭配极简的事件控制即可实现切换，还可以封装成和原addTab用法接近的工具函数降低迁移成本：
首先先添加全局基础样式（只需要加一次）：

.tab-container .tab-header {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.tab-container .tab-header .tab-item {
  padding: 6px 12px;
  cursor: pointer;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.tab-container .tab-header .tab-item.active {
  border-bottom-color: #2c7fb8;
  color: #2c7fb8;
}
.tab-container .tab-content .tab-pane {
  display: none;
}
.tab-container .tab-content .tab-pane.active {
  display: block;
}

然后封装构造标签页Popup的工具函数：

function createTabbedPopup(tabs = []) {
  // 生成标签头HTML
  const tabHeader = tabs.map((tab, index) => `
    <div class="tab-item ${index === 0 ? 'active' : ''}" data-tab-index="${index}">
      ${tab.title}
    </div>
  `).join('')
  // 生成标签内容HTML
  const tabContent = tabs.map((tab, index) => `
    <div class="tab-pane ${index === 0 ? 'active' : ''}" data-tab-pane="${index}">
      ${tab.content}
    </div>
  `).join('')
  // 组合完整容器
  const containerHTML = `
    <div class="tab-container">
      <div class="tab-header">${tabHeader}</div>
      <div class="tab-content">${tabContent}</div>
    </div>
  `
  const popup = L.popup().setContent(containerHTML)
  // 绑定标签切换事件，用事件委托避免Popup销毁后事件残留
  popup.on('open', () => {
    const container = popup._contentNode
    container.addEventListener('click', (e) => {
      if (e.target.classList.contains('tab-item')) {
        const index = e.target.dataset.tabIndex
        // 切换标签头状态
        container.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'))
        e.target.classList.add('active')
        // 切换内容显示
        container.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'))
        container.querySelector(`.tab-pane[data-tab-pane="${index}"]`).classList.add('active')
      }
    })
  })
  return popup
}

使用方式和原infobubble的用法高度匹配，迁移成本极低：

// 构造标签数组，对应原addTab的多次调用
const tabs = [
  { title: '基本信息', content: '<p>地点名称：XX大厦</p><p>地址：XX路XX号</p>' },
  { title: '配套设施', content: '<p>停车场：有</p><p>电梯：3部</p>' },
  { title: '联系方式', content: '<p>联系电话：13XXXXXXXXX</p>' }
]
// 给标记绑定带标签页的弹窗
L.marker([39.9, 116.4]).addTo(map)
  .bindPopup(createTabbedPopup(tabs))

方案2：已有jQuery的项目快速实现 #

如果你的项目原本就引入了jQuery，直接把现有标签页代码嵌入Popup即可，只需要在Popup打开时初始化标签页逻辑：

// 直接构造带标签页结构的HTML
const popupContent = `
  <div class="your-existing-tab-class">
    <!-- 你原有项目里用的jQuery标签页的HTML结构直接放这里 -->
  </div>
`
const popup = L.popup().setContent(popupContent)
popup.on('open', () => {
  // 弹窗打开后调用你原有项目里的jQuery标签页初始化方法即可
  $('.your-existing-tab-class').yourTabInitMethod()
})

注意事项 #

• Leaflet Popup默认关闭后会销毁DOM节点，所以所有事件绑定都建议放在popup.on('open')回调里执行，避免事件失效或内存泄漏
• 如果需要调整弹窗宽度，直接给Popup设置maxWidth配置项即可，不需要额外修改标签页样式

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