Bootstrap嵌入DataMap本地正常，GitHub Pages无法显示的问题排查

我帮你排查了几个关键问题，这应该能解决你的空白页问题：

1. 修复混合内容拦截问题 #

GitHub Pages强制使用HTTPS加密协议，但你的代码里引入了几个HTTP协议的外部脚本，现代浏览器会自动拦截这些"不安全"的混合内容，导致DataMap依赖的核心脚本加载失败，最终地图无法渲染。

你需要把所有HTTP开头的资源链接改成HTTPS，或者使用无协议的相对链接（//开头，自动适配当前页面的协议）：

• 把http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js改成https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js
• 把http://datamaps.github.io/scripts/0.4.0/datamaps.world.min.js改成https://datamaps.github.io/scripts/0.4.0/datamaps.world.min.js

2. 调整地图初始化时机 #

当页面加载时，Bootstrap的Tab内容处于隐藏状态（带有fade类），此时直接初始化DataMap会因为元素不可见，无法正确计算容器尺寸，导致地图渲染空白。

正确的做法是：在Tab切换完成（shown.bs.tab事件）时，再初始化对应Tab里的地图，同时用变量存储已初始化的地图，避免重复创建实例。

修改后的完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataMap in Bootstrap Tabs</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!-- 修复协议问题 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
    <script src="https://datamaps.github.io/scripts/0.4.0/datamaps.world.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#myTab li:eq(0) a").tab('show');
            
            // 存储已初始化的地图，避免重复创建实例
            var initializedMaps = {};

            $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
                var targetTabId = $(e.target).attr('href').slice(1); // 去掉链接中的#符号
                // 初始化Section A的地图
                if (targetTabId === 'sectionA' && !initializedMaps.sectionA) {
                    initializedMaps.sectionA = new Datamap({
                        element: document.getElementById('map'),
                        height: 500,
                        width: 500
                    });
                } 
                // 初始化Section B的地图
                else if (targetTabId === 'sectionB' && !initializedMaps.sectionB) {
                    initializedMaps.sectionB = new Datamap({
                        element: document.getElementById('map2'),
                        fills: {defaultFill: "#fa0af0"},
                        height: 500,
                        width: 500
                    });
                }
            });
        });
    </script>
</head>
<body>
<nav>
    <ul class="nav nav-pills center-pills" role="tablist" id="myTab">
        <li><a data-toggle="pill" href="#sectionA">Section A</a></li>
        <li><a data-toggle="pill" href="#sectionB">Section B</a></li>
    </ul>
</nav>
<div class="container">
    <section>
        <div class="tab-content">
            <div id="sectionA" class="tab-pane fade">
                <h2>sectionA</h2>
                <div id="map"></div>
            </div>
            <div id="sectionB" class="tab-pane fade">
                <h2>sectionB</h2>
                <div id="map2"></div>
            </div>
        </div>
    </section>
</div>
</body>
</html>

额外排查小技巧 #

你可以打开浏览器的开发者工具（按F12），查看**控制台(Console)标签是否有脚本加载失败的报错，以及网络(Network)**标签检查资源的加载状态，这是排查网页渲染问题的常用方法。

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