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;//獲取基礎數據信息