jvectormap地图插件初体验

jvectormap 地图的初次使用研究,记录下碰见的问题和解决问题的过程。

简单使用的效果如下:

jvectormap地图插件初体验_第1张图片

从实际使用过程中碰见的问题说起吧:

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());

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

你可能感兴趣的:(Web前端)