本文介绍了如何使用jQuery插件jvectormap来创建中国地图。首先提供了jvectormap的下载地址和中国地区地图文件的下载链接。接着，展示了如何在HTML中引入必要的JS和CSS文件，以及初始化地图的JavaScript代码。地图上各省份的颜色可以自定义，并且可以为省份添加提示和点击事件处理。
jvectormap地址：http://jvectormap.com/
要先下载中国地区的地图，下载地址：http://jvectormap.com/maps/countries/china/
引用js：
<script type="text/javascript" src="../Styles/maps/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../Styles/maps/jquery-jvectormap-2.0.2.min.js"></script>
<script type="text/javascript" src="../Styles/maps/jquery-jvectormap-cn-mill-en.js"></script>
html代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/maps/jquery-jvectormap-2.0.2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Styles/maps/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../Styles/maps/jquery-jvectormap-2.0.2.min.js"></script>
<script type="text/javascript" src="../Styles/maps/jquery-jvectormap-cn-mill-en.js"></script>
<script type="text/javascript" src="../Styles/maps/initmap.js"></script>
<style type="text/css">
#map
{
width:1000px;
height:490px;
margin:2px auto;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
js代码：
var pstatus = { "CN-54": "西藏", "CN-52": "贵州", "CN-35": "福建", "CN-50": "重庆", "CN-51": "四川", "CN-31": "上海",
"CN-32": "江苏", "CN-33": "浙江", "CN-14": "山西", "CN-15": "内蒙古", "CN-12": "天津", "CN-13": "河北", "CN-11": "北京",
"CN-34": "安徽", "CN-53": "云南", "CN-36": "江西", "CN-37": "山东", "CN-41": "河南", "CN-43": "湖南", "CN-42": "湖北",
"CN-45": "广西", "CN-44": "广东", "CN-46": "海南", "CN-65": "新疆", "CN-64": "宁夏", "CN-63": "青海", "CN-62": "甘肃",
"CN-61": "陕西", "CN-23": "黑龙江", "CN-22": "吉林", "CN-21": "辽宁"
};
var provinceCount = {};
var jmap = $('#map');
var map = new jvm.Map({
backgroundColor: 'transparent',
map: 'cn_mill_en',
container: jmap,
labels: {
regions: {
render: function (code) {
return pstatus[code];
},
offsets: function (code) {
return {
"CN-54": [0, 0],
"CN-52": [0, 0],
"CN-35": [0, 0],
"CN-50": [0, 0],
"CN-51": [0, 0],
"CN-31": [0, 0],
"CN-32": [0, 0],
"CN-33": [0, 0],
"CN-14": [0, 0],
"CN-15": [0, 70],
"CN-12": [5, 15],
"CN-13": [-20, 11],
"CN-11": [0, 0],
"CN-34": [0, 0],
"CN-53": [0, 0],
"CN-36": [0, 0],
"CN-37": [0, 0],
"CN-41": [0, 0],
"CN-43": [0, 0],
"CN-42": [0, 0],
"CN-45": [0, 0],
"CN-44": [0, 0],
"CN-46": [0, 0],
"CN-65": [0, 0],
"CN-64": [0, 0],
"CN-63": [0, 0],
"CN-62": [5, 0],
"CN-61": [0, 20],
"CN-23": [0, 0],
"CN-22": [0, 0],
"CN-54": [0, 0],
"CN-21": [0, 0]
}[code];
}
}
},
series: {
regions:
[{
values: {
"CN-54": '#66C2A5',
"CN-52": '#FC8D62',
"CN-35": '#8DA0CB',
"CN-50": '#E78AC3',
"CN-51": '#A6D854',
"CN-31": '#66C2A5',
"CN-32": '#FC8D62',
"CN-33": '#A6D854',
"CN-14": '#E78AC3',
"CN-15": '#A6D854',
"CN-12": '#66C2A5',
"CN-13": '#FC8D62',
"CN-11": '#8DA0CB',
"CN-34": '#E78AC3',
"CN-53": '#E78AC3',
"CN-36": '#66C2A5',
"CN-37": '#66C2A5',
"CN-41": '#8DA0CB',
"CN-43": '#8DA0CB',
"CN-42": '#A6D854',
"CN-45": '#66C2A5',
"CN-44": '#FC8D62',
"CN-46": '#8DA0CB',
"CN-65": '#E78AC3',
"CN-64": '#8DA0CB',
"CN-63": '#8DA0CB',
"CN-62": '#FC8D62',
"CN-61": '#66C2A5',
"CN-23": '#E78AC3',
"CN-22": '#66C2A5',
"CN-54": '#66C2A5',
"CN-21": '#8DA0CB'
},
attribute: 'fill'
}]
},
regionsSelectable: true,
onRegionTipShow: function (event, tip, code) {
},
onRegionClick: function (event, code) {
}
});
扫一扫
2800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
