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" />

<script src="~/Content/scripts/plugin/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>

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

第一次用肯定有很多的迷惘或碰壁的地方，多嘗試，走些彎路折回來也是好事，加深對問題的認識和了解！本文完。