YcJVectorMap: JVectorMap是一个制作地图数据的纯Javascript类库，自主封装.net地图框架，asp.net mvc版本

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

官方网站：

http://jvectormap.com/

1、需要引入的脚本

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;">
            0
        </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;
        }
    }

演示效果如下：
![输入图片说明](http://images2015.cnblogs.com/blog/457132/201509/457132-20150916175032523-1970879481.png "在这里输入图片标题")

github:

https://github.com/cheng5x/YcJVectorMap

oschina.net：

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

cheng5x/YcJVectorMap

简介

发行版

贡献者

近期动态

cheng5x/YcJVectorMap .gitee-modal { width: 500px !important; }

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

cheng5x/YcJVectorMap