JVectorMap 实现中国地图

我借鉴的博客：http://dove19900520.iteye.com/blog/1880668

一、功能介绍
　　JVectorMap是一款jquery的地图插件，可以支持各个国家和具体到省份的地图。

二、下载地址

　　http://download.csdn.net/download/laoshanbizu/5488955

三、使用步骤

　　1、引用

　　<script src="js/jqvmap/jquery-1.10.2.js" type="text/javascript"></script>

　　<script src="js/jqvmap/jquery.vmap.min.js" type="text/javascript"></script>

<script src="js/jqvmap/jquery-jvectormap-cn-mill-en.js" type="text/javascript"></script> 

　　2、在html里写好放置地图的div

<div id="container" style="width: 100%; height: 530px;"> </div>

　　3、在script里实现脚本

<script type="text/javascript">var areaName = 'china';var color = "#ace1ff"; //子图块初始化颜色var backgroundColor = '#fff';//地图背景色var hoverColor = '#00CCFF';//鼠标移入时图块高亮显示的颜色var paramKey = "id";//请求展示数据时传入的参数keyvar paramValue = "";//请求展示数据时传入的参数valuevar showInfosUrl = "abc.action";//获取展示数据的URL，入参：图块ID，出参格式：[{“id”:”11”, ”personcount”:”29万”, ”name”:”beijing”, ”tel”:”13972271234”},...]var layId = 3;//图块层级//为子图块自定义颜色方案var colors=['#c7e8fb','#fcd68d','#d3e398'];//鼠标移入图块时显示的图块信息，用户可以自行修改其中的代码function labelShows(label,item){label.html(item.name+item.des);label.css({"font-size":"12px","color":"#000","background":"#fff","padding":"5px"});return label;}var areaValue;var dataStatus;var layer;var showInfos;$(function () {                areaValue = getMapData(areaName+"Map");//获取坐标信息dataStatus = getDataStatus(areaName+"DataStatus");//获取基础数据信息layer = getLayer(areaName+"Layer");//图块层级信息showInfos = getShowInfos(showInfosUrl,paramKey,paramValue);//获取展示数据信息common(areaName,areaValue,dataStatus,layer,showInfos);//加载图块。$('.jvectormap-zoomin').click();$('.jvectormap-zoomin,.jvectormap-zoomout').hide()//隐藏左侧点击放大缩小按钮
        });//获取展示数据function getShowInfos(showInfosUrl,paramKey,paramValue){var data;$.ajax({type : "post",async:false,url : showInfosUrl,data : paramKey + "=" + paramValue,async : false,success : function(result){data = result;}});return data;}//展现图块function common(areaName,areaValue,dataStatus,layer,showInfos){var index = 0;            $.fn.vectorMap('addMap',areaName,areaValue);$('#container').vectorMap({ map: areaName,color: color, //子图块初始化颜色backgroundColor: backgroundColor,//地图背景色hoverColor: hoverColor,//鼠标移入时图块高亮显示的颜色borderWidth : '1',//动态显示内容onLabelShow: function (event, label, code) {$.each(dataStatus, function (i, items) {if (code == items.cha) {/*$.each(showInfos,function(j,its){if(its.id == items.id){labelShows(label,its);}});*/labelShows(label,items);}});},});//为子图块配置颜色$.each(dataStatus,function(i,items){if(index >= colors.length){index = 0;}var jsonStr = "{" + items.cha + ":'"+colors[index]+"'}";$('#container').vectorMap('set', 'colors', eval('(' + jsonStr + ')'));index ++;});}</script>

在实际应用中我是用的ajax和json，先定义一个全局变量chinaDataStatus，拼完以后用它接收MapData ，注意必须把json串转成js对象，中括号拼在字符串里边，因为用ajax，所以必须还得注意下加载的先后顺序

var MapData;
for (var i = 0; i < myMap.length; i++) {if ((i + 1) == myMap.length) {MapData += "{ cha: '" + myMap[i].branch + "', name: '<b class=\"city\">" + myMap[i].branchtxt + "：</b>', des: '<div Class=\"MapData\"><span class=\"yusuan\">总保费：" + myMap[i].allins + "</span><span class=\"yusuan\">同比增长：" + myMap[i].allins_incrrate + "%</span><span class=\"yusuan\">长期险首年期交：" + myMap[i].longinsnewY + "</span><span class=\"yusuan\">短期险：" + myMap[i].shortins + "</span><span class=\"yusuan\">长险标准保费：" + myMap[i].total_std + "</span><span class=\"yusuan\" style=\"display:none\">等级：" + myMap[i].total_incr_class + "</span></Div>',grade: '"+ myMap[i].total_incr_class + "'}]";}else {if (i != 0) {MapData += "{ cha: '" + myMap[i].branch + "', name: '<b class=\"city\">" + myMap[i].branchtxt + "：</b>', des: '<div Class=\"MapData\"><span class=\"yusuan\">总保费：" + myMap[i].allins + "</span><span class=\"yusuan\">同比增长：" + myMap[i].allins_incrrate + "%</span><span class=\"yusuan\">长期险首年期交：" + myMap[i].longinsnewY + "</span><span class=\"yusuan\">短期险：" + myMap[i].shortins + "</span><span class=\"yusuan\">长险标准保费：" + myMap[i].total_std + "</span><span class=\"yusuan\" style=\"display:none\">等级：" + myMap[i].total_incr_class + "</span></Div>',grade: '"+ myMap[i].total_incr_class + "'},"; ;}else {
MapData = "[{ cha: '" + myMap[i].branch + "', name: '<b class=\"city\">" + myMap[i].branchtxt + "：</b>', des: '<div Class=\"MapData\"><span class=\"yusuan\">总保费：" + myMap[i].allins + "</span><span class=\"yusuan\">同比增长：" + myMap[i].allins_incrrate + "%</span><span class=\"yusuan\">长期险首年期交：" + myMap[i].longinsnewY + "</span><span class=\"yusuan\">短期险：" + myMap[i].shortins + "</span><span class=\"yusuan\">长险标准保费：" + myMap[i].total_std + "</span><span class=\"yusuan\" style=\"display:none\">等级：" + myMap[i].total_incr_class + "</span></Div>', grade: '"+ myMap[i].total_incr_class + "'},"; }
}