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也是完全兼容的。

最后

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