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.

例如：<link href="~/Content/scripts/plugin/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />

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("<span><b style='font-size:12px;color:yellow;'>{0}</b>{1}</span>".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());

第一次用肯定有很多的迷惘或碰壁的地方，多尝试，走些弯路折回来也是好事，加深对问题的认识和了解！本文完。

jvectormap地图插件初体验

猜你喜欢