如何使DataMaps在浏览器中显示？

Question

I'm trying to embed a DataMap (datamaps.github.io) in my website with Bootstrap and am trying to use the following code as test code. 我正在尝试使用Bootstrap将DataMap（datamaps.github.io）嵌入我的网站中，并尝试使用以下代码作为测试代码。

from http://plnkr.co/edit/W9SbVTm0ovffh5i7ahid?p=preview : 来自http://plnkr.co/edit/W9SbVTm0ovffh5i7ahid?p=preview ：

<!DOCTYPE html>
<html lang="en">

<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="http://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="http://datamaps.github.io/scripts/0.4.0/datamaps.world.min.js">
</script>


<script>

    $(document).ready(function () {
        $("#myTab li:eq(0) a").tab('show');
    });

</script>

<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">

    <!--<div id="map"></div>-->
    <section>
        <div class="tab-content">
            <div id="sectionA" class="tab-pane fade">
                <H2>sectionA</H2>
                <!-- the map will appear here -->
                <div id="map"></div>

            </div>
            <div id="sectionB" class="tab-pane fade">
                <H2>sectionB</H2>
                <div id="map2"></div>

            </div>
        </div>
    </section>


    <script>
        $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
            console.log(e);
            if (e.target.href.indexOf('sectionA') > -1) {
                console.log("Should Show Map!!");
            }
        });

        var map = new Datamap({
            element: document.getElementById('map'),
            height: 500, width: 500
        });
        var map = new Datamap({
            element: document.getElementById('map2'), fills: {defaultFill: "fa0af0"},
            height: 500, width: 500
        });
    </script>

</div>
</body>
</html>

However, this doesn't work and I can get the html code to work offline in a browser, but not on my Github Pages site even with identical code. 但是，这不起作用，我可以使html代码在浏览器中脱机工作，但即使使用相同的代码也无法在我的Github Pages网站上使用。 Online, I just get a blank page. 在网上，我只是空白页。 I've seen on other StackOverflow answers that the size of the map must be specified for it to work with Bootstrap, but here it is specified and still doesn't display. 我在其他StackOverflow答案中已经看到，必须指定地图的大小才能与Bootstrap一起使用，但是此处已指定并且仍然不显示。

Am I missing some script import? 我是否缺少一些脚本导入？ Or what are some other possible issues? 还是其他一些可能的问题？

Any help greatly appreciated! 任何帮助，不胜感激！

Answer 1

You have some tasks that need to be done: 您需要完成一些任务：

Remove this line: <script src="/datamaps.world.min.js"></script> 删除以下行： <script src="/datamaps.world.min.js"></script>
Change from http to https the urls of your assets. 将资产的网址从http更改为https 。

Hope this helps! 希望这可以帮助！

如何使DataMaps在浏览器中显示？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-01-05 16:39:22

如何使DataMaps在浏览器中显示？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-01-05 16:39:22

解决方案1
1 已采纳 2018-01-05 16:39:22