Wie kann ich DataMaps im Browser anzeigen lassen?

Ich versuche, eine DataMap (datamaps.github.io) in meiner Website mit Bootstrap einzubetten und versuche, den folgenden Code als Testcode zu verwenden.Wie kann ich DataMaps im Browser anzeigen lassen?

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

aber das funktioniert nicht, und ich kann den HTML-Code bekommt offline in einem Browser zu arbeiten, aber nicht auf meiner Github Seiten Website sogar mit identischem Code. Online, ich bekomme nur eine leere Seite. Ich habe in anderen StackOverflow-Antworten gesehen, dass die Größe der Map angegeben werden muss, damit sie mit Bootstrap funktioniert, aber hier ist sie angegeben und wird immer noch nicht angezeigt.

Fehle ich einige Skript importieren? Oder was sind andere mögliche Probleme?

Jede Hilfe sehr geschätzt!

Quelle

2017-12-31 amita00

** Ich habe auf meinem AWS s3-Bucket als Website gehostet und es funktionierte: ** http://StackOverflow2017.S3-Website-US-East-1.amazonaws.com/ – Ele

Könnte es ein Problem sein mit der Kompatibilität von DataMaps und Github Pages dann? – amita00

Können Sie den Github-Link teilen? – Ele

Sie haben einige Aufgaben, die erledigt werden müssen:

diese Zeile entfernen: <script src="/datamaps.world.min.js"></script>
Wechsel von http zu https die Urls Ihres Vermögens.

Hoffe, das hilft!

Quelle

2018-01-05 16:39:22 Ele

Wie kann ich DataMaps im Browser anzeigen lassen?

Antwort

Verwandte Themen