最近有一个项目需要将网站访问量动态的在中国地图中显示出来,点击每个省份后会单独进入这个省的地图,显示省的详细数据,
之前试了下kartograph,但是生成地图实在难看,所以换了现在用的jquary,里边已经有做好的中国省份地图数据,js格式的,但是遗憾的是好像没有省份详细得地图数据,
所以这块只能稍后自己做了,话不多说,先看下效果图:
大概流程:
首先生成一个json格式的文件,里面存放了相关数据,然后javascript会调用这些数据动态在地图中显示。
json文件:(pv可以写脚本动态传值,url为这个省的链接,现在每个省的地图还没有弄,所以就先空着了)
{
"1" : { "id": "HKG", "name": "香港", "pv": "4003", "url": "" },
"2" : { "id": "HAI", "name": "海南", "pv": "2002", "url": "" },
"3" : { "id": "YUN", "name": "云南", "pv": "1232", "url": "" },
"4" : { "id": "BEJ", "name": "北京", "pv": "5000", "url": "" },
"5" : { "id": "TAJ", "name": "天津", "pv": "5703", "url": "" },
"6" : { "id": "XIN", "name": "新疆", "pv": "1000", "url": "" },
"7" : { "id": "TIB", "name": "西藏", "pv": "3300", "url": "" },
"8" : { "id": "QIH", "name": "青海", "pv": "6000", "url": "" },
"9" : { "id": "GAN", "name": "甘肃", "pv": "3457", "url": "" },
"10" : { "id": "NMG", "name": "内蒙古", "pv": "", "url": "" },
"11" : { "id": "NXA", "name": "宁夏", "pv": "3452", "url": "" },
"12" : { "id": "SHX", "name": "山西", "pv": "2346", "url": "" },
"13" : { "id": "LIA", "name": "辽宁", "pv": "3451", "url": "" },
"14" : { "id": "JIL", "name": "吉林", "pv": "6000", "url": "" },
"15" : { "id": "HLJ", "name": "黑龙江", "pv": "3462", "url": "" },
"16" : { "id": "HEB", "name": "河北", "pv": "1235", "url": "" },
"17" : { "id": "SHD", "name": "山东", "pv": "3451", "url": "" },
"18" : { "id": "HEN", "name": "河南", "pv": "2346", "url": "" },
"19" : { "id": "SHA", "name": "陕西", "pv": "2341", "url": "" },
"20" : { "id": "SCH", "name": "四川", "pv": "1235", "url": "" },
"21" : { "id": "CHQ", "name": "重庆", "pv": "1235", "url": "" },
"22" : { "id": "HUB", "name": "湖北", "pv": "3000", "url": "" },
"23" : { "id": "ANH", "name": "安徽", "pv": "5342", "url": "" },
"24" : { "id": "JSU", "name": "江苏", "pv": "2345", "url": "" },
"25" : { "id": "SHH", "name": "上海", "pv": "3452", "url": "" },
"26" : { "id": "ZHJ", "name": "浙江", "pv": "", "url": "" },
"27" : { "id": "FUJ", "name": "福建", "pv": "2346", "url": "" },
"28" : { "id": "TAI", "name": "台湾", "pv": "2356", "url": "" },
"29" : { "id": "JXI", "name": "江西", "pv": "5346", "url": "" },
"30" : { "id": "HUN", "name": "湖南", "pv": "2346", "url": "" },
"31" : { "id": "GUI", "name": "贵州", "pv": "1236", "url": "" },
"32" : { "id": "GXI", "name": "广西", "pv": "6456", "url": "" },
"33" : { "id": "GUD", "name": "广东", "pv": "3246", "url": "" }
}
地图显示代码:(网上的代码,拿过来修改了一下,嘿嘿)
基于jquery的中国地图