JVectorMap 实现中国地图

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

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

二、下载地址

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

三、使用步骤

　　1、引用

　　<link href="js/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

　　<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";//请求展示数据时传入的参数key
    var paramValue = "";//请求展示数据时传入的参数value
    var 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 + "'},"; 
　　}
}

　　chinaDataStatus=MapData;
　　chinaDataStatus=eval(chinaDataStatus);

　　dataStatus = chinaDataStatus;//获取基础数据信息