jVectorMap是一个优秀的、兼容性强的jQuery地图插件。它可以工作在包括IE6在内的各款浏览器中,矢量图输出,除官方提供各国地图数据外,用户可以使用数据转换程序定制地图数据。
这里基于jVectorMap插件制作中国地图,其中近期有活动进行的省份区域变色显示,点击有活动的省份区域,便打开对应活动列表页面。
首先引入必需的文件,包括样式表、jQuery框架、jVectorMap库,中国地图数据库:
<link href="jquery.vector-map.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.vector-map.js"></script> <script type="text/javascript" src="china-zh.js"></script>
地图放置区域HTML标签:
<div id="map"></div>
编写JavaScript函数,实现所需功能:
<script type="text/javascript"> $(function() { /*id为中国省份标识符,name为对应省份名称,两者固定。event为活动情况, url为活动列表页面地址,数据可后台动态生成,这两项有活动的地区填写,无则留空。*/ var dataStatus = [ { id: 'HKG', name: '香港', event: '', url: '' }, { id: 'HAI', name: '海南', event: '', url: '' }, { id: 'YUN', name: '云南', event: '', url: '' }, { id: 'BEJ', name: '北京', event: '(3个活动)', url: '/event/1' }, { id: 'TAJ', name: '天津', event: '', url: '' }, { id: 'XIN', name: '新疆', event: '', url: '' }, { id: 'TIB', name: '西藏', event: '', url: '' }, { id: 'QIH', name: '青海', event: '', url: '' }, { id: 'GAN', name: '甘肃', event: '', url: '' }, { id: 'NMG', name: '内蒙古', event: '', url: '' }, { id: 'NXA', name: '宁夏', event: '', url: '' }, { id: 'SHX', name: '山西', event: '', url: '' }, { id: 'LIA', name: '辽宁', event: '', url: '' }, { id: 'JIL', name: '吉林', event: '', url: '' }, { id: 'HLJ', name: '黑龙江', event: '', url: '' }, { id: 'HEB', name: '河北', event: '', url: '' }, { id: 'SHD', name: '山东', event: '', url: '' }, { id: 'HEN', name: '河南', event: '', url: '' }, { id: 'SHA', name: '陕西', event: '', url: '' }, { id: 'SCH', name: '四川', event: '(1个活动)', url: '/event/2' }, { id: 'CHQ', name: '重庆', event: '', url: '' }, { id: 'HUB', name: '湖北', event: '(1个活动)', url: '/event/3' }, { id: 'ANH', name: '安徽', event: '', url: '' }, { id: 'JSU', name: '江苏', event: '', url: '' }, { id: 'SHH', name: '上海', event: '', url: '' }, { id: 'ZHJ', name: '浙江', event: '', url: '' }, { id: 'FUJ', name: '福建', event: '', url: '' }, { id: 'TAI', name: '台湾', event: '', url: '' }, { id: 'JXI', name: '江西', event: '', url: '' }, { id: 'HUN', name: '湖南', event: '', url: '' }, { id: 'GUI', name: '贵州', event: '', url: '' }, { id: 'GXI', name: '广西', event: '', url: '' }, { id: 'GUD', name: '广东', event: '', url: '' } ]; $('#map').vectorMap({ map: 'china_zh', backgroundColor: false, color: "#BBBBBB", hoverColor: false, //显示各地区名称和活动 onLabelShow: function (event, label, code) { $.each(dataStatus, function (i, items) { if (code == items.id) { label.html(items.name + items.event); } }); }, //鼠标移入省份区域,改变鼠标状态 onRegionOver: function(event, code){ $.each(dataStatus, function (i, items) { if ((code == items.id) && (items.event != '')) { $('#map').css({cursor:'pointer'}); } }); }, //鼠标移出省份区域,改回鼠标状态 onRegionOut: function(event, code){ $.each(dataStatus, function (i, items) { if ((code == items.id) && (items.event != '')) { $('#map').css({cursor:'auto'}); } }); }, //点击有活动的省份区域,打开对应活动列表页面 onRegionClick: function(event, code){ $.each(dataStatus, function (i, items) { if ((code == items.id) && (items.event != '')) { window.location.href = items.url; } }); } }); //改变有活动省份区域的颜色 $.each(dataStatus, function (i, items) { if (items.event != '') { var josnStr = "{" + items.id + ":'#00FF00'}"; $('#map').vectorMap('set', 'colors', eval('(' + josnStr + ')')); } }); }); </script>
最终效果为:
原文:http://xinyuefei.com/83.htm
相关推荐
JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图。同样支持地图缩放和地图平面移动等相应的功能。由于JVectorMap是基于jQuery的,所以支持大...
jquery-jvectormap-cn-mill.js 中的台湾坐标。
JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图。同样支持地图缩放和地图平面移动等相应的功能。由于JVectorMap是基于jQuery的,所以支持大...
jQuery矢量SVG地图插件JVectorMap DEMO演示_files
jquery中国省份地图插件
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
jQuery实现的矢量SVG地图插件JVectorMap.zip
JVectorMap是一个优秀的、兼容性强的jQuery地图插件。
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
这是一款使用jquery和png图片来制作的中国省份地图特效插件。该中国省份地图插件使用多张png图片来组成中国省份地图,并在鼠标滑过各个省份时将其高亮。 使用方法 在页面中引入jquery和样式文件style.css。 <...
jquery图片插件制作图片轮播滚动代码 jquery图片插件制作图片轮播滚动代码
jquery 插件jquery 插件jquery 插件jquery 插件
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
JVectorMap 是一个优秀的、兼容性强的用来显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 or 4, Safari, Chrome, Opera, IE9, 同时也支持老的ie浏览器ie6到ie8.使用 jVectorMap也很简单,和其他的jQuery方法相同...
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery打印插件制作网页文本打印效果代码 jquery打印插件制作网页文本打印效果代码