最近自己在写一个足迹页面,风格依照我的主页风格。但是作为“足迹”的展示页面,就不能单纯的只给出文字效果。实在太过单薄。想起来之前看到过别人用jVectorMap写的地图很漂亮,自己这两天也来弄了下。

足迹页地址:https://travel.xubingyang.com

地图其实本身没什么,无非就是绘制地图数据。jVectorMap官网就有一堆数据,而且还有现成中国数据非常有效率。但是问题在于国际社会对于China这个词的认识和大陆小伙伴的认识不一样。所以jVectorMap官网上China-cn-mill地图里没有香港,澳门,台湾的地图数据。港澳太小,刚开始我没注意到,但是没有台湾的地图,这鸡就不像鸡了啊。

6/10在网上找到了香港,澳门,台湾的数据,计划着6/11手动写进了地图里就大功告成。但是6/11一早,我偶然在星巴克里听到俩中国愤青学生的谈话,提到钓鱼岛。于是想到地图信息里连台湾都没有,钓鱼岛肯定也是要自己加的。

但钓鱼岛的地图信息实在在网上没找到现成的,于是我决定,自己画!

添加数据和简单的用SVG转到js文档里,熟练的人也就分分钟,不过对于我这样刚开始摸索的人,实在还是痛苦的。不过还好,奋战了半小时后。成品出炉。

渲染地图代码:

省市自治区代码:

地区编码地区名地区编码地区名地区编码地区名地区编码地区名
CN-32江苏省CN-14山西省CN-43湖南省CN-61陕西省
CN-52贵州省CN-35福建省CN-42湖北省CN-23黑龙江省
CN-53云南省CN-12天津市CN-45广西壮族自治区CN-22吉林省
CN-50重庆市CN-13河北省CN-44广东省CN-21辽宁省
CN-51四川省CN-11北京市CN-46海南省CN-HK香港
CN-31上海市CN-34安徽省CN-65新疆维吾尔自治区CN-MC澳门
CN-54西藏自治区CN-36江西省CN-64宁夏回族自治区CN-TW台湾
CN-33浙江省CN-37山东省CN-63青海省CN-DD钓鱼岛
CN-15内蒙古自治区CN-41河南省CN-62甘肃省

源代码其实几乎全部在前端。方便和我一样的新手犯错误,直接拿到这里来分享。

地图数据下载链接:

http://travel.xubingyang.com/china/jquery-jvectormap-cn-mill.js