如何在“美国地图” JQuery插件中为每个州添加可点击的链接

Question

我是Java脚本JQuery的新手。 我已经在Shopify网站上成功实现了美国地图jQuery插件。 但是无法为每个州添加可点击的链接。如何为每个州添加链接？

Map_Image

这是美国地图插件文档： https://newsignature.github.io/us-map/

这是我在codeopen中的工作： https://codepen.io/mesbahworld/pen/gQqaVo/

    $(document).ready(function() {
    $('#map').usmap({});
  });

var state_data = {
    MD: {fill: '#364650'},
    VA: {fill: 'yellow', fullname:'Varginia', src: 'http://raphaeljs.com/'},
  };

$('#map').usmap({
  stateStyles: {fill: '#A4AA88'},
  stateHoverStyles: {fill: 'teal'},
  stateHoverAnimation: 0,
  showLabels: true,
  stateSpecificStyles: state_data
  //stateSpecificHoverStyles: {MD: {fill: 'red'}}
});

$('#map').on('usmapmouseover', function(event, data) {
  // Output the abbreviation of the state name to the console
  $("#name span").html(data.name);
});

Answer 1

您可以添加

$('#map').on('usmapclick', function(event, data) {
    var state=data.name; 
    if(state=="WY") window.location='http://google.com';
    if(state=="KS") window.location='http://yahoo.com';
    // ....
    // ....
});  

示例

$(document).ready(function() {
    $('#map').usmap({
    });
  });
  


var state_data = {
    MD: {fill: '#364650'},
    VA: {fill: 'yellow', fullname:'Varginia', src: 'http://raphaeljs.com/'},
  };

$('#map').usmap({
  stateStyles: {fill: '#A4AA88'},
  stateHoverStyles: {fill: 'teal'},
  stateHoverAnimation: 0,
  showLabels: true,
  stateSpecificStyles: state_data
  //stateSpecificHoverStyles: {MD: {fill: 'red'}}
});

$('#map').on('usmapmouseover', function(event, data) {
  // Output the abbreviation of the state name to the console
  $("#name span").html(data.name);
});

$('#map').on('usmapclick', function(event, data) {
  var state=data.name; 
  if(state=="WY") window.location='http://google.com';
  if(state=="KS") window.location='http://yahoo.com';
  // ....
  // ....
});  

.section {
  width: 100%;
  text-align: center;
  vertical-align: middle;
}
.map {
  width: 600px;
  height: 400px;
  display: inline-block;
}

.name {
  font-size: 20px;
  font-family: "Lato";
  font-weight: bold;
  color: #000000;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-bottom: 40px;

  
  
}

svg path {
  stroke-width: 1px;
  stroke: white;
}

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://newsignature.github.io/us-map/js/libs/raphael.js'></script>
<script src='https://newsignature.github.io/us-map/js/libs/jquery.usmap.js'></script>

<div class="row-map">
<div class="section">

<div class="name" id="name">Shop By State: <span> Select From Map </span>
</div>
<div id="clicked-state"></div>
<div class="map" id="map"></div>

</div>
</div>