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

in with 0 comment

jquery.vmap.js 介绍

这是个很好用的地图插件, adminLTE的插件包中有集成.
我应为最近做一个管理系统, 安利同事layui失败后, 选择了adminLTE搭建前端~
(用的是3.1版本)
根据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