javascript - 如何在“美国地图”JQuery 插件中为每个州添加可点击链接
问题描述
我是 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);
});
解决方案
你可以加
$('#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>
推荐阅读
- android - 眨眼检测 - 如何?
- php - 如何使用 mail::button 组件将数据从电子邮件模板传递回控制器?
- libgdx - libgdx 物理系统改进
- apache-spark - 如何确保 RDD 的某些分区始终由相同的 Spark 工作人员处理?
- c# - Visual Studio 不再打开 Winforms 的图形编辑器
- javascript - php 数组到 js 数组在 php arr 上给出了未定义的变量,并且之前多次使用过
- ruby-on-rails - 使用 Web 服务器集成测试 Web 扩展的架构
- kotlin - 有没有办法了解协程被取消时在做什么?
- sql - PostgreSQL 列中 POINT 和 LINESTRING 对象的混合。如何从 LINESTRING 中提取 POINT 和 first 点?
- python - 读取 .bag 文件时帧未在 5000 内到达 - pyrealsense2