[adminLTE 3.1] jquery.vmap.js 中国地图的使用与坑

in with 0 comment

jquery.vmap.js

这是个很好用的地图插件, adminLTE的插件包中有集成。

我应为最近做一个管理系统, 安利同事layui失败后, 选择了adminLTE搭建前端。

根据adminLTE中的演示 默认是美国地图。

使用思路

4793284702374093287409

查看了代码, 查了下想换成中国地图的就需要更改 map 为 cn_mill 修改后没有效果。

    // World map by jvectormap
    $('#world-map').vectorMap({
        map              : 'cn_mill',
        backgroundColor  : 'transparent',
        regionStyle      : {
            initial: {
                fill            : 'rgba(255, 255, 255, 0.7)',
                'fill-opacity'  : 1,
                stroke          : 'rgba(0,0,0,.2)',
                'stroke-width'  : 1,
                'stroke-opacity': 1
            }
        },
        series           : {
            regions: [{
                values           : visitorsData,
                scale            : ['#ffffff', '#0154ad'],
                normalizeFunction: 'polynomial'
            }]
        },
        onRegionLabelShow: function (e, el, code) {
            if (typeof visitorsData[code] != 'undefined')
                el.html(el.html() + ': ' + visitorsData[code] + ' new visitors')
        }
    })


仔细查看后要加载一个国家插件js才行, 然后去了 官网 下载。
image.png

名字被我改了下。

image.png

放入对应目录。

image.png

再次启动,地图出来了。

image.png

问题解决

鼠标放上对应省份应该出来地区,可是现在一直报错。

image.png

image.png

很纳闷,然后确认了一遍位置,没有问题。

干脆去追查错误,跟源码发现:
我下载的中国地图插件的 CN 是大写的, 源码里 将CN 换成小写在去获取对应的省份信息, 出错了。

应该是版本差异造成的!adminLTE中引入的和我在官网下的有点区别。

image.png

干脆去改了下载的中国地图插件 CN改cn后正常工作!!

image.png

省份是拼音,我给改成那个汉字的,山西陕西 有点麻烦, 其他还好hhhh~~~

image.png

发下我改的中国地图的插件吧!

链接:https://pan.baidu.com/s/1qPXEoe8Z8kwI4ZE36UBnCg
提取码:ug65

使用挺简单,导入js就好。
框框里是要使用的地图名字和路径信息。
image.png