jvectormap地图插件初体验
jvectormap 地图的初次使用研究，记录下碰见的问题和解决问题的过程。
简单使用的效果如下：
从实际使用过程中碰见的问题说起吧：
1：版本问题：百度搜索jvectormap的使用教程都引用的是jquery 1.8.2版本，而项目采用的是jquery 3.3.1版本，在使用地图区域着色时报错：
jquery-3.3.1.js:3827 Uncaught TypeError: Cannot read property 'apply' of undefined
at jQuery.fn.init.$.fn.vectorMap (jquery-jvectormap-2.0.3.min.js:1)
着色的js代码：
$('#map').vectorMap('set', 'colors', {
'CN-11': '#66C2A5',
'CN-52': '#FC8D62'
});
解决办法：
map.series.regions[0].setValues({'CN-11': '#66C2A5', 'CN-52': '#FC8D62'});
这里map是jvectormap的实例化对象；实例化过程见后面；
2：台湾地图的svg信息没有：
这个也是折腾了半天，到网上找的台湾的Path 矢量信息，发现坐标定位不对，后面又搜索了一番，找到了现在的版本；
3：在实例化jvectormap对象的参数中（如下所示），regions下的scale和问题1中的map.series.regions[0].setValues是冲突的：
series: {
regions: [{
scale: ['#92c1dc', '#ebf4f9'],
normalizeFunction: 'polynomial',
attribute: 'fill',
values: dataColor
}]
}...
此时会报错：
Uncaught TypeError: Cannot read property 'initial' of undefined
at jvm.DataSeries.setValues (VM984 jquery-jvectormap-2.0.3.min.js:1)
at new jvm.DataSeries (VM984 jquery-jvectormap-2.0.3.min.js:1)
at jvm.Map.createSeries (VM984 jquery-jvectormap-2.0.3.min.js:2)
解决办法：拿掉scale的定义，所以如果要自定义颜色区域时，需要拿掉scale的定义。
最后，一个简单的使用步骤：
1：到官网上下载压缩版本：http://jvectormap.com ；Full Version: demo中引用的js十分庞大，初次使用还是用压缩版本好，先有一个整体认识，否则会被庞大的js量给吓到了；
2：添加css，js 的引用，依赖于jquery.
例如：
3：实例化map对象，配置参数，各参数的含义可以到官网上去查看文档，初次使用结合英文描述，可以改些参数，看看效果就更能明白英文描述到底说的什么，至于更高级或更复杂的效果，需要深入研究，比如：drill down, makers,labels ,legend等的使用。先满足基本需求在扩展吧。一个简单的例子如下：
var dataColor = {
'CN-52': 50,
'CN-35': 35,
'CN-50': 45,
'CN-51': 58,
'CN-31': 69,
'CN-32': 79,
'CN-33': 100,
'CN-14': 200,
'CN-13': 1,
'CN-34': 40,
'CN-36': 50,
'CN-37': 60,
'CN-41': 170,
'CN-43': 170,
'CN-42': 170,
'CN-45': 100,
'CN-44': 100,
'CN-61': 100,
'CN-48': 3
}var map = new jvm.Map({
map: 'cn_mill',
backgroundColor: 'transparent',
container: $('#city_map'),
zoomAnimate: true,
zoomMax: 5,
zoomMin: 1,
// zoomOnScroll: false,
regionsSelectableOne: true,
regionsSelectable: true,
regionStyle: {
initial: {
fill: '#e4e4e4'
},
selected: {
fill: '#d6cfd8'
},
},
focusOn: {
x: 0.5,
y: 0.5,
scale: 1.0,
animate: true
},
series: {
regions: [{
// scale: ['#92c1dc', '#ebf4f9'],
normalizeFunction: 'polynomial',
attribute: 'fill',
values: dataColor
}]
},
onRegionClick: function (event, code) {
$.each(dataStatus, function (i, items) {
if ((code == items.id) && (items.event != '')) {
alert(code);
}
});
},
onRegionTipShow: function (e, el, code) {
$.each(dataStatus, function (i, items) {
if (code == items.id) {
el.html("{0}{1}".format([items.name, items.event]));
}
});
}
});
// $('#city_map').vectorMap('set', 'focus', { regions: ['CN-11', 'CN-12'], animate: true });
var palette = ['#66C2A5', '#FC8D62', '#8DA0CB', '#E78AC3', '#A6D854'];
generateColors = function () {
var colors = {},
key;
for (key in map.regions) {
colors[key] = palette[Math.floor(Math.random() * palette.length)];
}
return colors;
};
map.series.regions[0].setValues(generateColors());第一次用肯定有很多的迷惘或碰壁的地方，多尝试，走些弯路折回来也是好事，加深对问题的认识和了解！本文完。