问如何在浏览器中显示DataMaps？
EN

Stack Overflow用户

提问于 2017-12-31 19:47:42

回答 1查看 441关注 0票数 0

我试图在我的网站中嵌入一个DataMap (datamaps.github.io)，并尝试使用下面的代码作为测试代码。

来自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>

但是，这不起作用，而且我可以让html代码在浏览器中脱机工作，但即使使用相同的代码，也不能在我的Github页面站点上工作。在网上，我只得到一个空白页。我在其他StackOverflow答案中看到，必须指定映射的大小才能与Bootstrap一起工作，但是在这里它是指定的，仍然不显示。

我是不是漏掉了一些脚本导入？或者其他可能的问题是什么？

任何帮助都非常感谢！

javascript

datamaps

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-05 16:39:22

您有一些需要完成的任务：

删除这一行：<script src="/datamaps.world.min.js"></script>
将资产的urls从http更改为https。

希望这能帮上忙！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48045282

复制

相似问题

问如何在浏览器中显示DataMaps？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在浏览器中显示DataMaps？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在浏览器中显示DataMaps？
EN