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

转载 2015年11月20日 17:40:43

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

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

map-plaug

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

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

一、下载插件

下载地址: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地图插件页面获取帮助。

相关文章推荐

用jQuery插件jVectorMap制作中国省份区域图

jVectorMap是一个优秀的、兼容性强的jQuery地图插件。它可以工作在包括IE6在内的各款浏览器中,矢量图输出,除官方提供各国地图数据外,用户可以使用数据转换程序定制地图数据。 这里基于...

几款JS地图插件比较

因工作需要,最近研究几款关于地图的JS插件,现与大家分享一下。 以下比较只是浅层次的分析一下,并没有实际通过项目检验,所以不足之处还请大家指出。 地图插件对比 插件名 ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jvectormap制作多级地图(如:世界地图中包含中国带省的地图)

var markers;   var values1;   var values2;   var values3;        $(function(){           var  m...

jvectormap自定义地图

最近要做svg相关的项目,接触到了Jvectormap,看到网上很多同学求ziding

jvectormap地图插件简单教程

简单记录下使用现在比较流行的地图插件jvetormap的心得体会。 之所以选用这款一个很重要的原因是它是矢量输出的,其次对各个浏览器的支持也相当出色,甚至包括ie6! http://jvector...

最全的前端资源教程

综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.c...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Jvectormap中文帮助文档(API)

关于Jvectormap     JVectorMap 是一个优秀的、兼容性强的用来显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 or 4, Safari, Chrome,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery生成地图的插件JVectorMap初体验
举报原因:
原因补充:

(最多只允许输入30个字)