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