? ? ?我借鑒的博客：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";//請求展示數據時傳入的參數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 + "'},"; } }

　　chinaDataStatus=MapData;
　　chinaDataStatus=eval(chinaDataStatus);

　　dataStatus = chinaDataStatus;//獲取基礎數據信息

?

轉載于:https://www.cnblogs.com/cjqa/p/4600131.html

總結

以上是生活随笔為你收集整理的JVectorMap 实现中国地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。