jquery.vmap.js
这是个很好用的地图插件, adminLTE的插件包中有集成。
我应为最近做一个管理系统, 安利同事layui失败后, 选择了adminLTE搭建前端。
根据adminLTE中的演示 默认是美国地图。
使用思路
查看了代码, 查了下想换成中国地图的就需要更改 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才行, 然后去了 官网 下载。
名字被我改了下。
放入对应目录。
再次启动,地图出来了。
问题解决
鼠标放上对应省份应该出来地区,可是现在一直报错。
很纳闷,然后确认了一遍位置,没有问题。
干脆去追查错误,跟源码发现:
我下载的中国地图插件的 CN 是大写的, 源码里 将CN 换成小写在去获取对应的省份信息, 出错了。
应该是版本差异造成的!adminLTE中引入的和我在官网下的有点区别。
干脆去改了下载的中国地图插件 CN改cn后正常工作!!
省份是拼音,我给改成那个汉字的,山西陕西 有点麻烦, 其他还好hhhh~~~
发下我改的中国地图的插件吧!
链接:https://pan.baidu.com/s/1qPXEoe8Z8kwI4ZE36UBnCg
提取码:ug65
使用挺简单,导入js就好。
框框里是要使用的地图名字和路径信息。
本文由 考拉 创作,采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Sep 16,2021