文档章节

JVectorMap地图插件.Net版开源

cheng5x
 cheng5x
发布于 2015/09/16 18:05
字数 1149
阅读 516
收藏 2

jVectorMap地图插件只要浏览器技术JavaScript、CSS,HTML,SVG或VML就可以浏览使用,不需要Flash或其他专有的浏览 器插件。所以jVectorMap在所有现代移动浏览器上也能正常运行。

 

官方网站:

http://jvectormap.com/

 

1、需要引入的脚本

1     <link href="jvectormap/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css" />2     <script src="jvectormap/jquery-1.6.min.js" type="text/javascript"></script>3     <script src="jvectormap/jquery.vector-map.js" type="text/javascript"></script>4     <script src="jvectormap/china-zh.js" type="text/javascript"></script>

2、前端显示片段

<script type="text/javascript">

        $(function () {

            /*id为中国省份标识符,name为对应省份名称,两者固定。value为活动情况,

  url为活动列表页面地址,数据可后台动态生成,这两项有活动的地区填写,无则留空。*/

            /*var dataStatus =

            [{ id: 'HKG', name: '香港:', value: '6', url: '#' },

            { id: 'HAI', name: '海南:', value: '0', url: '#' },

            { id: 'YUN', name: '云南:', value: '0', url: '#' },

            { id: 'BEJ', name: '北京:', value: '3', url: '#' },

            { id: 'TAJ', name: '天津:', value: '0', url: '#' },

            { id: 'XIN', name: '新疆:', value: '0', url: '#' },

            { id: 'TIB', name: '西藏:', value: '0', url: '#' },

            { id: 'QIH', name: '青海:', value: '0', url: '#' },

            { id: 'GAN', name: '甘肃:', value: '0', url: '#' },

            { id: 'NMG', name: '内蒙古:', value: '0', url: '#' },

            { id: 'NXA', name: '宁夏:', value: '0', url: '#' },

            { id: 'SHX', name: '山西:', value: '0', url: '#' },

            { id: 'LIA', name: '辽宁:', value: '0', url: '#' },

            { id: 'JIL', name: '吉林:', value: '0', url: '#' },

            { id: 'HLJ', name: '黑龙江:', value: '0', url: '#' },

            { id: 'HEB', name: '河北:', value: '0', url: '#' },

            { id: 'SHD', name: '山东:', value: '0', url: '#' },

            { id: 'HEN', name: '河南:', value: '0', url: '#' },

            { id: 'SHA', name: '陕西:', value: '0', url: '#' },

            { id: 'SCH', name: '四川:', value: '1', url: '#' },

            { id: 'CHQ', name: '重庆:', value: '0', url: '#' },

            { id: 'HUB', name: '湖北:', value: '1', url: '#' },

            { id: 'ANH', name: '安徽:', value: '0', url: '#' },

            { id: 'JSU', name: '江苏:', value: '0', url: '#' },

            { id: 'SHH', name: '上海:', value: '0', url: '#' },

            { id: 'ZHJ', name: '浙江:', value: '0', url: '#' },

            { id: 'FUJ', name: '福建:', value: '0', url: '#' },

            { id: 'TAI', name: '台湾:', value: '0', url: '#' },

            { id: 'JXI', name: '江西:', value: '0', url: '#' },

            { id: 'HUN', name: '湖南:', value: '5', url: '#' },

            { id: 'GUI', name: '贵州:', value: '0', url: '#' },

            { id: 'GXI', name: '广西:', value: '0', url: '#' },

            { id: 'GUD', name: '广东:', value: '9', url: '#'}];*/

            var dataStatus = @Html.Raw(ViewData["mapDataJson"].ToString());

$('#map').vectorMap({

                map: 'china_zh',

                backgroundColor: false,

                color: "#BBBBBB",

                hoverColor: false,

                //显示各地区名称和活动

                onLabelShow: function (value, label, code) {

                    $.each(dataStatus, function (i, items) {

                        if (code == items.id) {

                            label.html(items.name + items.value);

                        }

                    });

                },

                //鼠标移入省份区域,改变鼠标状态

                onRegionOver: function (value, code) {

                    $.each(dataStatus, function (i, items) {

                        if ((code == items.id) && (items.value != '')) {

                            $('#map').css({ cursor: 'pointer' });

                            var josnStr = "{" + items.id + ":'#00FF00'}";

                            $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));

                        }

                    });

                },

                //鼠标移出省份区域,改回鼠标状态

                onRegionOut: function (value, code) {

                    $.each(dataStatus, function (i, items) {

                        if ((code == items.id) && (items.value != '')) {

                            $('#map').css({ cursor: 'auto' });


                            if (items.value != '0') {

                                var josnStr = "{" + items.id + ":'#001F76'}";

                                $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));

                                $('#jvectormap1_'+items.id).attr("fill-opacity",(items.opacity));

                            }

                            else {

                                var josnStr = "{" + items.id + ":'#BBBBBB'}";

                                $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));

                            }

                        }

                    });

                },

                //点击有活动的省份区域,打开对应活动列表页面

                onRegionClick: function (value, code) {

                    $.each(dataStatus, function (i, items) {

                        if ((code == items.id) && (items.value != '')) {

                          window.location.href = items.url;

                        }

                    });

                }

            });

            //改变有活动省份区域的颜色

            $.each(dataStatus, function (i, items) {

                if (items.value != '0') {

                    var josnStr = "{" + items.id + ":'#001F76'}";

                    $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')'));

                    $('#jvectormap1_'+items.id).attr("fill-opacity",(items.opacity));

                }

            });

        });

    </script>

</head>

<body>

    <div id="map" style="margin-left: 45px; padding-top: 10px; padding-left: 10px; background: white;

        width: 650px; height: 530px;">

    </div>

    <div style="width: 420px; height: 15px; margin: 0 auto; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#BBBBBB',endColorStr='#001F76',gradientType='1');

        background: -moz-linear-gradient(left, #BBBBBB, #001F76); background: -o-linear-gradient(left,#BBBBBB, #001F76);

        background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#BBBBBB), to(#001F76));

        position: relative;">

        <div style="position: absolute; top: -18px;">

        </div>

        <div style="position: absolute; top: -18px; right: 0;">

            @ViewData["maxAreaCount"]

        </div>

    </div>

</body>

3、控制器数据绑定片段

public class HomeController : Controller

    {

        //

        // GET: /Home/

        public ActionResult Index()

        {

            //json转换

            JavaScriptSerializer _ser = new JavaScriptSerializer();


            Dictionary<string, string> _mapDataDic = new Dictionary<string, string>();

            List<YcJVectorMap.Model.Map.data> _mapDataList = this.GetMapDefault(out _mapDataDic);

            decimal maxAreaCount = 0;


            //TODO:更改数值方法1

            _mapDataList.Find(_ => _.id == "HKG").value = "26";

            _mapDataList.Find(_ => _.id == "MAC").value = "6";

            _mapDataList.Find(_ => _.id == "GUD").value = "68";


            //TODO:更改数值方法2

            _mapDataList.Find(_ => _.name.Contains("北京")).value = "183";

            _mapDataList.Find(_ => _.name.Contains("海南")).value = "5";


            //TODO:获取标识最大值

            ViewData["maxAreaCount"] = maxAreaCount = _mapDataList.Max(_ => Convert.ToDecimal(_.value));


            //TODO:赋值透明度

            foreach (var item in _mapDataList)

            {

                item.opacity = (Convert.ToDecimal(item.value) / maxAreaCount).ToString();

            }


            //TODO:赋值Json

            ViewData["mapDataJson"] = _ser.Serialize(_mapDataList);


            return View();

        }


        /// <summary>

        /// 获取初始化地图分布

        /// </summary>

        /// <returns></returns>

        public List<YcJVectorMap.Model.Map.data> GetMapDefault(out Dictionary<string, string> mapDataDic)

        {

            List<YcJVectorMap.Model.Map.data> _mapDataList = new List<Model.Map.data>();


            mapDataDic = new Dictionary<string, string>();

            mapDataDic.Add("MAC", "澳门:");

            mapDataDic.Add("HKG", "香港:");

            mapDataDic.Add("HAI", "海南:");

            mapDataDic.Add("YUN", "云南:");

            mapDataDic.Add("BEJ", "北京:");

            mapDataDic.Add("TAJ", "天津:");

            mapDataDic.Add("XIN", "新疆:");

            mapDataDic.Add("TIB", "西藏:");

            mapDataDic.Add("QIH", "青海:");

            mapDataDic.Add("GAN", "甘肃:");

            mapDataDic.Add("NMG", "内蒙古:");

            mapDataDic.Add("NXA", "宁夏:");

            mapDataDic.Add("SHX", "山西:");

            mapDataDic.Add("LIA", "辽宁:");

            mapDataDic.Add("JIL", "吉林:");

            mapDataDic.Add("HLJ", "黑龙江:");

            mapDataDic.Add("HEB", "河北:");

            mapDataDic.Add("SHD", "山东:");

            mapDataDic.Add("HEN", "河南:");

            mapDataDic.Add("SHA", "陕西:");

            mapDataDic.Add("SCH", "四川:");

            mapDataDic.Add("CHQ", "重庆:");

            mapDataDic.Add("HUB", "湖北:");

            mapDataDic.Add("ANH", "安徽:");

            mapDataDic.Add("JSU", "江苏:");

            mapDataDic.Add("SHH", "上海:");

            mapDataDic.Add("ZHJ", "浙江:");

            mapDataDic.Add("FUJ", "福建:");

            mapDataDic.Add("TAI", "台湾:");

            mapDataDic.Add("JXI", "江西:");

            mapDataDic.Add("HUN", "湖南:");

            mapDataDic.Add("GUI", "贵州:");

            mapDataDic.Add("GXI", "广西:");

            mapDataDic.Add("GUD", "广东:");


            foreach (var item in mapDataDic)

            {

                _mapDataList.Add(new YcJVectorMap.Model.Map.data()

                {

                    id = item.Key,

                    name = item.Value,

                    value = "0",

                    url = "#"

                });

            }


            return _mapDataList;

        }

    }

演示效果如下:

github:

https://github.com/cheng5x/YcJVectorMap

 

oschina.net:

http://git.oschina.net/cheng5x/YcJVectorMap


© 著作权归作者所有

cheng5x
粉丝 9
博文 11
码字总数 6729
作品 2
佛山
项目经理
私信 提问
10 个神奇的 jQuery 插件

说是神奇,你可能会觉得我们没见过世面,但这里提及的一些 jQuery 的插件的确平时比较少见,用的人应该更少。 Grid portfolio 使用竖排方式显示条目信息,现在很流行的的内容布局方式。 Slid...

红薯
2011/12/28
3.8K
1
W3Perl 3.185 发布,网站日志分析工具

W3Perl 3.185 发布,此版本使用 jvectormap 包初步支持 JavaScript maps;提供区域统计数据。 W3Perl 是一个Web日志的分析工具,支持 FTP、Squid、邮件日志等,提供一个图形化的界面,以及文...

oschina
2014/05/13
531
0
10款刚出炉的 jQuery 特效插件

5月份,又有一批优秀的jQuery特效插件新鲜出炉了! 下面要介绍的10款jQuery插件,涉及到地图、画廊、幻灯等特效,希望你能喜欢。 1. bxSlider 该插件是内容滑块和幻灯特效。在线演示点击 he...

小卒过河
2011/05/13
12K
11
jVectorMap地图上显示地名怎么搞?

比如中国地图上显示每个省的名字~~~

jvmpoko
2013/07/31
1K
3
超过 40 款很有用而且很新的 jQuery 插件

很多,不翻译了,大家自己个看吧,反正酷、新是肯定的。 MotionCAPTCHA ( Demo | Download ) MotionCAPTCHA是一个 jQuery 的验证码 CAPTCHA 插件,要求用户按照图中指示画出大概的形状。基于...

红薯
2011/11/30
7.5K
13

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.2K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部