jqueryを使用してこのjqueryベースのUSマップを設定するにはどうすればよいですか？

Question

私はこのサイトからクリック可能なjquery United Statesマップを組み込むことを試みていますhttps://newsignature.github.io/us-map/私はSharepointで構築しているページに移動します。私はコンテンツエディタのWebパーツを使用していて、このコードを埋め込んでいますが、マップが表示されません。下のコードからわかるように、私はサイトからダウンロードしたus-map-1.0.1.zipファイルに含まれていたjavascriptファイルをリンクしています。私はまた、そのzipパッケージから、私が取り組んでいるページのフォルダに2つのsvgマップをアップロードしました。私はどのように私はそれらのSVGファイルに接続するはずですが、私はこのマップを表示することができますか分からない。このコードを修正するために何かすべきことはありますか？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>  <!--this version works with IE--> 
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js"></script> 
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/raphael.js"></script> 
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/color.jquery.js"></script> 

<script> 

$(document).ready(function() { 

$('#map').usmap({ 
    // The click action 
    click: function(event, data) { 
    $('#clicked-state') 
     .text('You clicked: '+data.name) 
     .parent().effect('highlight', {color: '#C7F464'}, 2000); 
    } 
}); 

}); 

</script> 



<style> 

$('#map').usmap({ 
    stateStyles: {fill: 'blue'} 
}); 

</style> 


<div id="map" style="width: 350px; height: 250px;"></div> 
<div id="clicked-state"></div> 

Answer 1

[OK]を開始します。 まず、リンクが古くなったり壊れているようです。 https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js が機能していません。 ファイルにアクセス可能である必要があります。

次の点は、スタイルタグ内でjavascriptを使用していることです。 それは動作しません。あなたのリンクが固定された後

、このようにそれを試してみてください。

$(document).ready(function() { 
 
/** FIRST YOU HAVE TO INITIALIZE THE MAP **/ 
 
$('#map').usmap({ 
 
    stateStyles: {fill: 'blue'}, 
 
     'click': function(event, data) { 
 
     $('#clicked-state').text('You clicked:'+data.name); 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script> 
 

 
<script src="https://cdn.rawgit.com/NewSignature/us-map/0677afad/jquery.usmap.js"></script> 
 

 

 
<div id="map" style="width: 350px; height: 250px;"></div> 
 
<div id="clicked-state"></div>