Question

我正在尝试将可点击的jquery美国地图从此网站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

好的，我们开始吧。首先，您的链接似乎已过时或损坏。 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>

如何使用jquery设置这个基于jquery的美国地图？

1 个答案: