[英]How can I make DataMaps display in browser?
我正在嘗試使用Bootstrap將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 Pages網站上使用。 在網上,我只是空白頁。 我在其他StackOverflow答案中已經看到,必須指定地圖的大小才能與Bootstrap一起使用,但是此處已指定並且仍然不顯示。
我是否缺少一些腳本導入? 還是其他一些可能的問題?
任何幫助,不勝感激!
您需要完成一些任務:
刪除以下行: <script src="/datamaps.world.min.js"></script>
將資產的網址從http
更改為https
。
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.