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 + "'},"; }
}

　　chinaDataStatus=MapData;
　　chinaDataStatus=eval(chinaDataStatus);

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

转载于:https://www.cnblogs.com/cjqa/p/4600131.html

JVectorMap 实现中国地图相关推荐

jvectormap 中国地图 (包括香港、台湾、澳门)
一个完整的中国地图(各个省,市.还有国两制),谢谢大家. 忘了网上哪位的范例,我加了些修改. 1 <html xmlns="http://www.w3.org/1999/xhtml&q ...
用jQuery插件jVectorMap制作中国省份区域图
jVectorMap是一个优秀的.兼容性强的jQuery地图插件.它可以工作在包括IE6在内的各款浏览器中,矢量图输出,除官方提供各国地图数据外,用户可以使用数据转换程序定制地图数据. 这里基于jVe ...
中国地图FLASH和JS版本
本文转载自: https://www.cnblogs.com/yetiea/archive/2012/02/15/2352632.html 作者:yetiea 转载请注明该声明. 最近要实现在web中 ...
python采用Basemap绘制完美中国地图（包括绘制边界框，随机点等）
python采用Basemap绘制完美中国地图(包括绘制边界框,随机点等) 1. 效果图 2. 原理 2.1 依赖模块及安装 2.2 工程目录 2.3 依赖文件latlng.txt 经纬度 3 源码 ...
python是中国的吗-使用Python实现画一个中国地图
为什么是Python 先来聊聊为什么做数据分析一定要用Python或R语言.编程语言这么多种,Java, PHP都很成熟,但是为什么在最近热火的数据分析领域,很多人选择用Python语言? 数据分析只 ...
如何用python画出中国地图-用Python画一个中国地图
你用 Java 的 4 行代码画一个地图出来?m.drawcountries(linewidth=1.5) 就变成了如许: 用 Java 可能吗?用 PHP 可能吗? 如不雅我们想显示中国地图,只须要 ...
如何用python画出中国地图-用Python画中国地图（二）
在上一篇文章<用Python画一个中国地图>中,我们简单描述了一下如何用Python快速画出一个中国地图的轮廓,似乎没有什么实用价值,这一次我们用实际数据填充它,使它看上去更有意义. 上色 ...
可视化：中国地图 python/ geopandas/ echarts
(区块链现在也成了"牛夫人") 前言地图,在可视化中总是引人注目的.之前我们介绍了如何用R语言中的ggplot2画中国地图.本篇我们在python中搞定地图,主要结合我在BMW丰 ...
pyecharts第十节、地图(二、中国地图)
上文继续创建[demo11.py]输入以下编码 from pyecharts import Mapprovince_distribution = {'河南': 45.23, '北京': 37.56, ...

JVectorMap 实现中国地图

JVectorMap 实现中国地图相关推荐

最新文章

热门文章