• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

YcJVectorMap: JVectorMap是一个制作地图数据的纯Javascript类库,自主封装.net地图框 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

YcJVectorMap

开源软件地址:

https://gitee.com/cheng5x/YcJVectorMap

开源软件介绍:

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

官方网站:

http://jvectormap.com/

1、需要引入的脚本

 <link href="jvectormap/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css" /> <script src="jvectormap/jquery-1.6.min.js" type="text/javascript"></script> <script src="jvectormap/jquery.vector-map.js" type="text/javascript"></script> <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>
0
@ViewData["maxAreaCount"]

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap