jquery生成地图的插件JVectorMap初体验

最近一个crm项目需要统计一下各个地区的销售纪录，以便更好推广和营销，我就想到了这款JVectorMap地图生成插件，生成地图很快，配置也很简单，不过由于使用的svg绘图，所以不支持低级浏览器，不过如果您的客户没有人使用像IE6或者是windows Xp的，那么你也可以大胆的使用他，真的很好用！

先来看看最终完成时候的截图：

这个布局是左边是显示的热点地图，颜色越深相应的销售额越大，右边是统计的一些数据，还没有排序而已。暂时没有找到好的方法去排序。

好了效果图就这样了，如果你按照我的方法，您也可以做出这么优美的热点地区统计地图。接下来步入正题：

一、下载插件

下载地址：http://jvectormap.com/download，我下载的是 jVectorMap 0.2.3 版本，每个版本使用方法和参数都不一样，官方网站就只有这个版本的帮助文档，所以就使用了这个 jVectorMap 0.2.3 版本。

二、引入文件

引入必需的文件，包括样式表、jQuery框架、jVectorMap库

<link href="style/jquery.vector-map.css" rel="external nofollow"  rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/jquery.vector-map.js"></script>

此外，还要引入中国地区地图坐标js文件，可以在这个地址下载：

全球国家城市坐标轮廓：http://jvectormap.com/maps/world/europe/

这个页面上有全球几乎所有国家的地图城市坐标轮廓文件，不过下载下来的文件不是中文的，既然是js文件，他里面也没有加密，那么可以修改为中文，我就把拼音全部换成了中文，需要的用户可以到这个地址下载：

中国城市坐标轮廓：http://www.uedsc.com/wp-content/uploads/2014/08/jquery-jvectormap-cn-mill-en.js

三、编写代码

基本的工作都做完了，那么剩下的就是编写代码了，首先我们需要一个显示地图的div：

<div id="city_map" style="height:600px;"></div>

所有的地图将显示在这个div里面，接下来我们要输出数据表格：

<table class="table_date" id="map_data" border="0" cellpadding="0" cellspacing="0" style="width:49%; float:right;"><thead>  <tr role="head">    <td>城市</td>    <td style="cursor: default;" sort="true" title="点击可排序">订单量？</td>    <td style="cursor: default;" sort="true" title="点击可排序">销售量？</td>    <td style="cursor: default;" sort="true" title="点击可排序">客单价？</td>  </tr>  </thead>  <tbody><tr map_num="CN-11">    <td>北京</td>    <td>14</td>    <td>20820</td>    <td>1487</td>  </tr>    <tr map_num="CN-52">    <td>贵州</td>    <td>1</td>    <td>2980</td>    <td>2980</td>  </tr>    <tr map_num="CN-35">    <td>福建</td>    <td>7</td>    <td>2280</td>    <td>325</td>  </tr>    <tr map_num="CN-50">    <td>重庆</td>    <td>21</td>    <td>17938</td>    <td>854</td>  </tr>    <tr map_num="CN-51">    <td>四川</td>    <td>25</td>    <td>19990</td>    <td>799</td>  </tr>    <tr map_num="CN-31">    <td>上海</td>    <td>52</td>    <td>78136</td>    <td>1502</td>  </tr>    <tr map_num="CN-32">    <td>江苏</td>    <td>39</td>    <td>65900</td>    <td>1689</td>  </tr>    <tr map_num="CN-33">    <td>浙江</td>    <td>26</td>    <td>14580</td>    <td>560</td>  </tr>    <tr map_num="CN-14">    <td>山西</td>    <td>3</td>    <td>3480</td>    <td>1160</td>  </tr>    <tr map_num="CN-12">    <td>天津</td>    <td>4</td>    <td>0</td>    <td>0</td>  </tr>    <tr map_num="CN-13">    <td>河北</td>    <td>8</td>    <td>10358</td>    <td>1294</td>  </tr>    <tr map_num="CN-34">    <td>安徽</td>    <td>7</td>    <td>7410</td>    <td>1058</td>  </tr>    <tr map_num="CN-36">    <td>江西</td>    <td>4</td>    <td>2980</td>    <td>745</td>  </tr>    <tr map_num="CN-37">    <td>山东</td>    <td>13</td>    <td>21380</td>    <td>1644</td>  </tr>    <tr map_num="CN-41">    <td>河南</td>    <td>2</td>    <td>3760</td>    <td>1880</td>  </tr>    <tr map_num="CN-43">    <td>湖南</td>    <td>14</td>    <td>13100</td>    <td>935</td>  </tr>    <tr map_num="CN-42">    <td>湖北</td>    <td>9</td>    <td>10798</td>    <td>1199</td>  </tr>    <tr map_num="CN-45">    <td>广西</td>    <td>16</td>    <td>35640</td>    <td>2227</td>  </tr>    <tr map_num="CN-44">    <td>广东</td>    <td>13</td>    <td>11880</td>    <td>913</td>  </tr>    <tr map_num="CN-61">    <td>陕西</td>    <td>5</td>    <td>3760</td>    <td>752</td>  </tr></tbody></table>

你可能需要查询数据库，然后循环输出表格里面的数据，不过这不在本文的讨论范围内，如果有疑问不知道怎么查询数据库，欢迎留言讨论。

接下来编写js代码：

$(function() {    var dataStatus = [　　　　{ id: 'CN-54', name: '西藏', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-11', name: '北京', event: '<br/>订单：14<br/>销售额：￥20,820', url: '' },　　　　{ id: 'CN-52', name: '贵州', event: '<br/>订单：1<br/>销售额：￥2,980', url: '' },　　　　{ id: 'CN-35', name: '福建', event: '<br/>订单：7<br/>销售额：￥2,280', url: '' },　　　　{ id: 'CN-50', name: '重庆', event: '<br/>订单：21<br/>销售额：￥17,938', url: '' },　　　　{ id: 'CN-51', name: '四川', event: '<br/>订单：25<br/>销售额：￥19,990', url: '' },　　　　{ id: 'CN-31', name: '上海', event: '<br/>订单：52<br/>销售额：￥78,136', url: '' },　　　　{ id: 'CN-32', name: '江苏', event: '<br/>订单：39<br/>销售额：￥65,900', url: '' },　　　　{ id: 'CN-33', name: '浙江', event: '<br/>订单：26<br/>销售额：￥14,580', url: '' },　　　　{ id: 'CN-14', name: '山西', event: '<br/>订单：3<br/>销售额：￥3,480', url: '' },　　　　{ id: 'CN-15', name: '内蒙古', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-12', name: '天津', event: '<br/>订单：4<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-13', name: '河北', event: '<br/>订单：8<br/>销售额：￥10,358', url: '' },　　　　{ id: 'CN-34', name: '安徽', event: '<br/>订单：7<br/>销售额：￥7,410', url: '' },　　　　{ id: 'CN-54', name: '云南', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-36', name: '江西', event: '<br/>订单：4<br/>销售额：￥2,980', url: '' },　　　　{ id: 'CN-37', name: '山东', event: '<br/>订单：13<br/>销售额：￥21,380', url: '' },　　　　{ id: 'CN-41', name: '河南', event: '<br/>订单：2<br/>销售额：￥3,760', url: '' },　　　　{ id: 'CN-43', name: '湖南', event: '<br/>订单：14<br/>销售额：￥13,100', url: '' },　　　　{ id: 'CN-42', name: '湖北', event: '<br/>订单：9<br/>销售额：￥10,798', url: '' },　　　　{ id: 'CN-45', name: '广西', event: '<br/>订单：16<br/>销售额：￥35,640', url: '' },　　　　{ id: 'CN-44', name: '广东', event: '<br/>订单：13<br/>销售额：￥11,880', url: '' },　　　　{ id: 'CN-46', name: '海南', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-65', name: '新疆', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-64', name: '宁夏', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-63', name: '青海', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-62', name: '甘肃', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-61', name: '陕西', event: '<br/>订单：5<br/>销售额：￥3,760', url: '' },　　　　{ id: 'CN-23', name: '黑龙江', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-22', name: '吉林', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-53', name: '云南', event: '<br/>订单：0<br/>销售额：￥0', url: '' },　　　　{ id: 'CN-21', name: '辽宁', event: '<br/>订单：0<br/>销售额：￥0', url: '' }    ];　　$('#city_map').vectorMap({　　　 map: 'cn_mill_en',　　　 color: "#FFEEEE",      backgroundColor: "#FFFFFF",      hoverColor:"#CCC",      //弹出控件文字      onLabelShow: function (event, label, code) {　　　　　　$.each(dataStatus, function (i, items) {　　　　　　　　if (code == items.id) {　　　　　　　　　　label.html("<span style='font-size:12px'>" + items.name + items.event + '</span>');　　　　　　　　}　　　　　　});　　　　},        //鼠标移入省份区域，改变鼠标状态　　　　onRegionOver: function(event, code){　　　　　　$.each(dataStatus, function (i, items) {　　　　　　　　if (code == items.id) {　　　　　　　　　　$('#map_data').css("background", '#EEEE');　　　　　　　　}　　　　　　});　　　　},　　});　    $('#city_map').vectorMap('set', 'colors', {        'CN-11': 'rgba(255, 0, 0, 0.53511151726304)',        'CN-52': 'rgba(255, 0, 0, 0.076591369906046)',        'CN-35': 'rgba(255, 0, 0, 0.058600108518719)',        'CN-50': 'rgba(255, 0, 0, 0.46103892395122)',        'CN-51': 'rgba(255, 0, 0, 0.51377902161807)',        'CN-31': 'rgba(255, 0, 0, 2.0082359996573)',        'CN-32': 'rgba(255, 0, 0, 1.6937487506068)',        'CN-33': 'rgba(255, 0, 0, 0.37473227289602)',        'CN-14': 'rgba(255, 0, 0, 0.089442270896993)',        'CN-13': 'rgba(255, 0, 0, 0.26621926492846)',        'CN-34': 'rgba(255, 0, 0, 0.19045035268584)',        'CN-36': 'rgba(255, 0, 0, 0.076591369906046)',        'CN-37': 'rgba(255, 0, 0, 0.5495045263729)',        'CN-41': 'rgba(255, 0, 0, 0.096638775451923)',        'CN-43': 'rgba(255, 0, 0, 0.33669360596282)',        'CN-42': 'rgba(255, 0, 0, 0.2775280578005)',        'CN-45': 'rgba(255, 0, 0, 0.91601222263472)',        'CN-44': 'rgba(255, 0, 0, 0.30533740754491)',        'CN-61': 'rgba(255, 0, 0, 0.096638775451923)',    });    $("#map_data").sorttable();)};

代码说明：

1. dataStatus变量是定义鼠标移动上去的时候显示文字；
2. 通过vectorMap方法可以设置每个城市的颜色，这里支持css样式表中设置的颜色值；
3. 地图默认颜色以及插件参数可以访问JVectorMap是一个优秀的兼容性强的jQuery地图插件页面获取帮助。