如何将Fandom交互式地图迁移至GitHub仓库并用于GitHub Pages？

1. 定位导出的地图核心信息 #

从WikiTeam导出的归档中，先梳理地图相关内容：

• 打开页面源码，找到原Fandom地图对应的<mapframe>标签，提取关键参数：坐标（lat/lon）、缩放级别（zoom）、宽高，以及关联的自定义数据路径（比如标记/区域的GeoJSON/KML文件）。
• 检查导出的附件目录，找出地图依赖的数据源文件（如.geojson、.kml），这些是地图显示内容的核心。

2. 替换Fandom专属组件为通用地图库 #

Fandom的<mapframe>是平台私有组件，GitHub Pages不支持，直接替换为开源的Leaflet.js（轻量无依赖，适配静态页面）：

• 在页面的<head>中引入Leaflet资源（建议本地化到项目，避免外部依赖失效）：

  <link rel="stylesheet" href="/assets/lib/leaflet/leaflet.css" />
  <script src="/assets/lib/leaflet/leaflet.js"></script>
  

• 将原<mapframe>标签替换为Leaflet的容器和初始化代码：
  原Fandom代码示例：

  <mapframe width="600" height="400" zoom="10" lat="51.505" lon="-0.09" data="/maps/city-markers.geojson"></mapframe>
  

  替换后的代码：

  <div id="wiki-map" style="width: 600px; height: 400px;"></div>
  <script>
    // 初始化地图
    const map = L.map('wiki-map').setView([51.505, -0.09], 10);
    // 添加基础地图瓦片层
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);
    // 加载自定义标记/区域数据
    fetch('/assets/maps/city-markers.geojson')
      .then(res => res.json())
      .then(data => L.geoJSON(data).addTo(map));
  </script>
  

3. 本地化所有地图资源 #

• 将导出的GeoJSON/KML文件、地图图标等资源复制到GitHub Pages项目的assets/maps/目录，确保代码中的路径与实际文件位置一致。
• 若使用了CDN资源，建议下载Leaflet的CSS/JS文件到项目的assets/lib/leaflet/目录，避免外部CDN故障影响加载。

4. 批量处理大量带地图的页面 #

如果维基中有大量含地图的页面，用Python脚本批量替换效率更高：

import os
import re

def process_map_tags(file_path):
    with open(file_path, 'r', encoding='utf-8') as f:
        content = f.read()
    
    # 匹配Fandom mapframe标签，提取参数和数据路径
    map_pattern = re.compile(
        r'<mapframe width="(\d+)" height="(\d+)" zoom="(\d+)" lat="([\d\.]+)" lon="([\d\.-]+)"(?: data="([^"]+)")?></mapframe>'
    )
    
    def replace_tag(match):
        width, height, zoom, lat, lon, data_path = match.groups()
        map_id = f"wiki-map-{hash(lat+lon)}"  # 避免多地图ID冲突
        data_part = ""
        if data_path:
            # 转换数据路径到本地assets目录
            local_data = f"/assets/maps/{os.path.basename(data_path)}"
            data_part = f'''
    fetch('{local_data}')
      .then(res => res.json())
      .then(data => L.geoJSON(data).addTo(map));'''
        
        return f'''<div id="{map_id}" style="width: {width}px; height: {height}px;"></div>
<script>
  const map = L.map('{map_id}').setView([{lat}, {lon}], {zoom});
  L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{
    attribution: '&copy; OpenStreetMap contributors'
  }}).addTo(map);{data_part}
</script>'''
    
    updated_content = map_pattern.sub(replace_tag, content)
    with open(file_path, 'w', encoding='utf-8') as f:
        f.write(updated_content)

# 遍历所有HTML页面文件
for root, _, files in os.walk('./your-wiki-pages-dir'):
    for file in files:
        if file.endswith('.html'):
            process_map_tags(os.path.join(root, file))

5. 测试与部署验证 #

• 本地测试：运行python -m http.server 8000，访问http://localhost:8000检查地图加载状态，通过浏览器控制台排查路径错误、资源加载失败问题。
• 部署验证：推送到GitHub Pages后，再次确认地图显示正常，确保所有相对路径与项目部署的子路径匹配。

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