JVectorMap是一个优秀的兼容性强的jQuery地图插件。

JVectorMap功能介绍

JVectorMap是一个优秀的、兼容性强的jQuery地图插件。它可以工作在包括IE6在内的各款浏览器中，矢量图输出，除官方提供各国地图数据外，用户可以使用数据转换程序定制地图数据。它使用 SVG 在Firefox 3 or 4, Safari, Chrome, Opera, IE9, 同时也支持老的ie浏览器ie6到ie8.使用 jVectorMap也很简单，和其他的jQuery方法相同。

在初始话地图的时候你也可以提供参数去改变地图的样式。

JVectorMap使用步骤

1、首先要下载JVectorMap插件包。

下载地址：http://download.csdn.net/download/laoshanbizu/5488955

2、引入必需的文件，包括样式表、jQuery框架、jVectorMap库，中国地图数据库：

1. <link href="style/jquery.vector-map.css" rel="stylesheet" type="text/css" />
2. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
3. <script type="text/javascript" src="js/jquery.vector-map.js"></script>
4. <script type="text/javascript" src="js/china-zh.js"></script><!—中国地区数据库-->

3、指定地图放置区域HTML标签：

1. <div id="container"></div>

4、编写JavaScript函数，实现所需功能：

1. <script type="text/javascript">
2. $(function() {
3. 　　/*id为中国省份标识符，name为对应省份名称，两者固定。event为活动情况，
4. 　　url为活动列表页面地址，数据可后台动态生成，这两项有活动的地区填写，无则留空。*/
5. 　　var dataStatus = [
6. 　　　　{ id: 'HKG', name: '香港', event: '', url: '' },
7. 　　　　{ id: 'HAI', name: '海南', event: '', url: '' },
8. 　　　　{ id: 'YUN', name: '云南', event: '', url: '' },
9. 　　　　{ id: 'BEJ', name: '北京', event: '(3个活动)', url: '/event/1' },
10. 　　　　{ id: 'TAJ', name: '天津', event: '', url: '' },
11. 　　　　{ id: 'XIN', name: '新疆', event: '', url: '' },
12. 　　　　{ id: 'TIB', name: '西藏', event: '', url: '' },
13. 　　　　{ id: 'QIH', name: '青海', event: '', url: '' },
14. 　　　　{ id: 'GAN', name: '甘肃', event: '', url: '' },
15. 　　　　{ id: 'NMG', name: '内蒙古', event: '', url: '' },
16. 　　　　{ id: 'NXA', name: '宁夏', event: '', url: '' },
17. 　　　　{ id: 'SHX', name: '山西', event: '', url: '' },
18. 　　　　{ id: 'LIA', name: '辽宁', event: '', url: '' },
19. 　　　　{ id: 'JIL', name: '吉林', event: '', url: '' },
20. 　　　　{ id: 'HLJ', name: '黑龙江', event: '', url: '' },
21. 　　　　{ id: 'HEB', name: '河北', event: '', url: '' },
22. 　　　　{ id: 'SHD', name: '山东', event: '', url: '' },
23. 　　　　{ id: 'HEN', name: '河南', event: '', url: '' },
24. 　　　　{ id: 'SHA', name: '陕西', event: '', url: '' },
25. 　　　　{ id: 'SCH', name: '四川', event: '(1个活动)', url: '/event/2' },
26. 　　　　{ id: 'CHQ', name: '重庆', event: '', url: '' },
27. 　　　　{ id: 'HUB', name: '湖北', event: '(1个活动)', url: '/event/3' },
28. 　　　　{ id: 'ANH', name: '安徽', event: '', url: '' },
29. 　　　　{ id: 'JSU', name: '江苏', event: '', url: '' },
30. 　　　　{ id: 'SHH', name: '上海', event: '', url: '' },
31. 　　　　{ id: 'ZHJ', name: '浙江', event: '', url: '' },
32. 　　　　{ id: 'FUJ', name: '福建', event: '', url: '' },
33. 　　　　{ id: 'TAI', name: '台湾', event: '', url: '' },
34. 　　　　{ id: 'JXI', name: '江西', event: '', url: '' },
35. 　　　　{ id: 'HUN', name: '湖南', event: '', url: '' },
36. 　　　　{ id: 'GUI', name: '贵州', event: '', url: '' },
37. 　　　　{ id: 'GXI', name: '广西', event: '', url: '' },
38. 　　　　{ id: 'GUD', name: '广东', event: '', url: '' }
39. 　　];
40. 　　$('#map').vectorMap({
41. 　　　　map: 'china_zh',
42. 　　　　backgroundColor: false,
43. 　　　　color: "#BBBBBB",
44. 　　　　hoverColor: false,
45. 　　　　//显示各地区名称和活动
46. 　　　　onLabelShow: function (event, label, code) {
47. 　　　　　　$.each(dataStatus, function (i, items) {
48. 　　　　　　　　if (code == items.id) {
49. 　　　　　　　　　　label.html(items.name + items.event);
50. 　　　　　　　　}
51. 　　　　　　});
52. 　　　　},
53. 　　　　//鼠标移入省份区域，改变鼠标状态
54. 　　　　onRegionOver: function(event, code){
55. 　　　　　　$.each(dataStatus, function (i, items) {
56. 　　　　　　　　if ((code == items.id) && (items.event != '')) {
57. 　　　　　　　　　　$('#map').css({cursor:'pointer'});
58. 　　　　　　　　}
59. 　　　　　　});
60. 　　　　},
61. 　　　　//鼠标移出省份区域，改回鼠标状态
62. 　　　　onRegionOut: function(event, code){
63. 　　　　　　$.each(dataStatus, function (i, items) {
64. 　　　　　　　　if ((code == items.id) && (items.event != '')) {
65. 　　　　　　　　　　$('#map').css({cursor:'auto'});
66. 　　　　　　　　}
67. 　　　　　　});
68. 　　　　},
69. 　　　　//点击有活动的省份区域，打开对应活动列表页面
70. 　　　　onRegionClick: function(event, code){
71. 　　　　　　$.each(dataStatus, function (i, items) {
72. 　　　　　　　　if ((code == items.id) && (items.event != '')) {
73. 　　　　　　　　　　window.location.href = items.url;
74. 　　　　　　　　}
75. 　　　　　　});
76. 　　　　}　　
77. 　　});
78. 　　//改变有活动省份区域的颜色
79. 　　$.each(dataStatus, function (i, items) {
80. 　　　　if (items.event != '') {
81. 　　　　　　var josnStr = "{" + items.id + ":'#00FF00'}";
82. 　　　　　　$('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
83. 　　　　}
84. 　　});
85. });
86. </script>

5、获取其他省份或地区的地图数据

可以用svg画图工具将需要的地图轮廓勾画出来，然后保存成svg格式的矢量图片，然后用nodepad++或xmlspy工具将svg文件打开，即可获取里面的地图数据。推荐工具：Inkscape

下载地址：http://download.csdn.net/download/laoshanbizu/5489111

当然，打开svg文件会看到有很多的数据，我们需要取的数据是以m开始，以z结尾的一串数字，然后将这串数字仿照china_zh.js文件组织成新的地图数据库。

举例：假如需要取北京市所有区和县的数据：

1. 首先需要勾画出各个区县的轮廓图（svg格式）；
2. 然后从各个svg文件中取出地图数据，
3. 对照着china_zh.js文件组织成新的地图数据库。

6、在地图中显示文字

从官网上下载的jvectormap插件中默认没有这个功能，你需要修改一下jquery.vector-map.js文件。

我的修改方式：

1）首先在VectorCanvas.prototype中添加一个新的函数，用来在地图的指定区域中绘制文字，代码如下：

1. createText: function(params) {
2.     var textNode;
3.     var tspanNode;
4.     if (this.mode == 'svg') {
5.             var xArea = params.x;
6.             var yArea = params.y;
7.             if(undefined != xArea && undefined != yArea && "" != xArea && "" != yArea ){
8.                 textNode = this.createSvgNode('text');                      
9.                 textNode.setAttribute('x', xArea);
10.                 textNode.setAttribute('y', yArea);
11.                 textNode.setAttribute('id', "text_"+params.name);
12.                 textNode.setAttribute("style",params.style);
13.                 tspanNode = this.createSvgNode('tspan');
14.                 $(tspanNode).text(params.name);
15.                 $(tspanNode).appendTo(textNode);
16.             }
17.     }
18.     return textNode;
19. }

2）调用该函数：

1. var param =
2. {name:mapData.pathes[key].name,x:mapData.pathes[key].x,y:mapData.pathes[key].y,style:textStyle};
3. var text = this.canvas.createText(param);
4. $(this.rootGroup).append(text);

其中param中需要包含的数据有需要显示的文字， x轴坐标值，y轴坐标值，样式（样式的具体内容，并非样式名称）。

这 段代码，需要放在function WorldMap(param)中，也就是插件中var WorldMap = function(params){}内部，具体位置，可以参照cratePath的方式添加，上面那三句，并不是并列的三句，是需要放在不同位置的，具 体的还是请参照createPath的添加方式。

3）对应的修改china_zh.js文件（可以参考beijing_2-zh.js）。

A、在height属性下面添加style属性，示例如下：

1. "style" :"font-size:6px;line-height:100%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:新宋体;z-index:5"

B、在pathes中的子元素中添加 x，y坐标值，示例如下：

1. "x": "330.8695","y":"350.8071"

至此，文字便可以正常显示了，他可以随着地图的放大而放大，位置不会改变。