如何在 JQuery 插件"U.S. Map"为每个状态添加可点击链接

Question

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

地图_图像

这里是美国地图插件文档：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>