最近简单研究了下jvectormap，很不幸简简单单的就遇到了一个坑，原谅我水平低下，花了好长时间才解决，这里记录下，但愿其他同学能够避坑。
一、世界地图
首先是世界地图，不多说，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" media="screen" href="js/jquery-jvectormap-1.2.2.css" type="text/css"/>
<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-jvectormap-1.2.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-jvectormap-world-mill-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/world-data.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="margin:auto">
<div id="world-map" style="width: 100%; height: 700px"></div>
</body>
<script type="text/javascript">
$(function(){
$('#world-map').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
values: worldData,
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function(e, el, code){
el.html(el.html()+ ' - '+worldData[code]); //这里是个坑，网上查到直接写的worldData，如果不加[code]显示不正常
}
});
});
</script>
</html> 这里需要注意两点：
1.需要引入的js和css文件自己网上找，可以参考官方地址：https://jvectormap.com/download/，如果找不到，可以留言联系我。
2.world-data.js是需要引入的数据，格式如下：
var worldData = {
"AF": 16.63,
"AL": 11.58,
"DZ": 158.97,
"AO": 85.81,
"AG": 1.1,
"AR": 351.02,
"CN": 5745.13,
}; 这里是一维数据，前面是国家代码，后面是数量，更多代码可以参考官网说明，如下：
https://jvectormap.com/maps/world/world/
二、中国地图
中国地图实现方法类似，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" media="screen" href="js/jquery-jvectormap-1.2.2.css" type="text/css"/>
<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-jvectormap-1.2.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-jvectormap-cn-mill.js" type="text/javascript" charset="utf-8"></script>
<script src="js/china-data.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="margin:auto">
<div id="chain-map" style="width: 100%; height: 700px"></div>
</body>
<script type="text/javascript">
$(function(){
$('#chain-map').vectorMap({
map: 'cn_mill',
series: {
regions: [{
values: chinaData,
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function(e, el, code){
el.html(el.html()+ ' - '+chinaData[code]);
}
});
});
</script>
</html> 这里和世界地图不同的地方主要是两点：
1.需要引入中国地图的js文件
2.数据表现不同，china-data.js中的格式如下：
var chinaData = {
"CN-32": 16.63,
"CN-52": 11.58,
"CN-54": 158.97,
"CN-10": 85.81,
"CN-14": 1.1,
"CN-37": 351.02,
"CN-11": 5745.13,
}; 这里的CN-数字代表不同的省份，具体可以参考jvectormap官方说明，如下：
https://jvectormap.com/maps/countries/china/
好了，到这里地图的基本实现算是完成了，实现效果发不出来，大家可以自己尝试下， 如果有问题可以留言！实际应用中只需要往china-data.js、world-data.js这两个文件中填充数据就行了。另外，本次的数据都是单维数据，如果想要填充一些多维数据，可以参考网上的示例，如果我有深入研究，也会及时贴出来！
![Vector源码分析Vector类图Vector类属性Vector常用API总结[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)