JVectorMap地图插件.Net版开源
2015-09-16 18:01
405 查看
jVectorMap地图插件只要浏览器技术JavaScript、CSS,HTML,SVG或VML就可以浏览使用,不需要Flash或其他专有的浏览 器插件。所以jVectorMap在所有现代移动浏览器上也能正常运行。
官方网站:
http://jvectormap.com/
1、需要引入的脚本
2、前端显示片段
View Code
演示效果如下:
github:
https://github.com/cheng5x/YcJVectorMap
oschina.net:
http://git.oschina.net/cheng5x/YcJVectorMap
官方网站:
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、前端显示片段
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; } }
View Code
演示效果如下:
github:
https://github.com/cheng5x/YcJVectorMap
oschina.net:
http://git.oschina.net/cheng5x/YcJVectorMap
相关文章推荐
- 解决Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead
- tableviewcell不允许点击
- 找出只含有2,3,5因子构成的数的第N个
- poj1006 中国剩余定理&&中国剩余定理解析
- Async/Await - Best Practices in Asynchronous Programming
- NAT打洞(udp打洞和tcp打洞)
- 面试题_sleep和wait的区别
- 网络安全笔记
- 《程序员面试金典》--找出链表中倒数第k个节点
- LoadRunner集合点
- Android ViewPager与子控件点击事件冲突的解决方案
- java.lang.ClassNotFoundException: javax.persistence.Entity
- 为何time_before 起作用【转】
- CSDN的CODE平台使用
- 心得
- Scrum学习
- 安卓学习之路之内部存储之InternalStorage
- ios-开发 替换系统原生只读属性的 值
- 使用maven-shade-plugin构建可执行jar
- STL自定义排序函数 需要注意的问题