一款基于jQuery的地图插件–jvectormap

jvectormap是一款基于jquery的地图插件,它的官网 http://jvectormap.com/

首先来看个例子。中国每个省份的称呼,然后,开始使用jvectormap来开发一款地图吧。

创建地图

地图的创建,主要包括js文件的下载和文件的引入,如下操作:

1. 下载jvectormap文件

需要下载的文件包括处理地图功能的jvectormap工具库、美化地图控件的css,和每个区域地图的js库:

工具库和css可通过 http://jvectormap.com/download/ 进行下载

区域地图js文件则需要在 http://jvectormap.com/maps/world/europe/ 中进行选择下载

2. 引入jvectormap文件

假设工具库、css和区域地图js的名称分别为jquery-jvectormap-2.0.2.css、jquery-jvectormap-2.0.2.min.js和jquery-jvectormap-cn-mill-en.js,那么我们将它们引入到页面中:

<link rel="stylesheet" href="jquery-jvectormap-2.0.2.css">
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery-jvectormap-2.0.2.min.js"></script>
<script type="text/javascript" src="jquery-jvectormap-cn-mill-en.js"></script>

当以上工作都完成之后,我们需要一个容器去装载地图:

<div class="map-container" style="width:800px;height:600px"></div>

然后通过js将地图信息与容器结合起来,进行地图初始化:

$(".map-container").vectorMap({
    map: "cn_mill_en"
});

地图初始化demo:jvectormap地图初始化

以上vectorMap中map的值为 jquery-jvectormap-cn-mill-en.js 文件jquery扩展方法vectorMap的第二个参数。打开demo,当你鼠标在地图上移动时,你会发现每个地域显示的tips都是其省市对应的汉语拼音或英文,为了更直观,我们可以在 jquery-jvectormap-cn-mill-en.js 修改每个paths的name属性值。

与地图交互

在jvectormap中,我们可以设置jvectormap里的属性和方法来规定地图显示的样式和行为,比如说规定地图初始化背景色和每个区域填充色、是否能允许缩放和拖拽、是否可以选中地图某个区域等。关于地图自身设置,更多信息可访问:http://jvectormap.com/documentation/javascript-api/jvm-map/

大多数情况下,我们不仅仅只是为了生成地图,更进一步的目的是为了结合地图来展现每个区域所对应的数据。在vectorMap有onRegionTipShow方法,该方法会在鼠标经过某个区域时触发,并且该方法有一个参数为code,而这个code就是鼠标当前所在地域的索引值,于是,我们就可以通过这个索引值来获取数据信息。假设我们准备的地图数据为mapdata,其中id的值为每个区域的索引值:

var mapdata = [
    { id: "CN-54", province: "西藏" , data : "Xizang"},
    { id: "CN-52", province: "贵州" , data : "Guizhou"},
    { id: "CN-35", province: "福建" , data : "Fujian"},
    ...
]

然后在vectorMap中加入方法:

onRegionTipShow: function(e, el, code){
    $.each(mapdata, function (i, items) {
        if (items.id === code) {
          $regionName.html(items.province);
            $regionData.html(items.province + "的英文称呼:" + items.data);
            el.html(items.province);
      }
    })
}

当然,你也可以作一些其他交互。比如官网的一些不同形式的例子:http://jvectormap.com/examples/world-gdp/

兼容性

一般情况下,因为地图是由svg生成,所以像其他图形库一样,对于不兼容svg技术浏览器的则用vml渲染,因此它对低版本IE甚至IE6也是完全兼容的。

最后

写完本篇文章之后,发现涉及svg地图开发的还有百度的echart,它似乎更符合国情,但是上面所介绍的并非没有什么卵用,毕竟它们语法和使用都大同小异。若你想再研究地图开发,我推荐你请前往http://echarts.baidu.com/doc/example.html#map

评论功能已关闭。