jVectorMap 是一個(gè)優(yōu)秀的、兼容性強(qiáng)的jQuery地圖插件。它可以工作在包括IE6在內(nèi)的各款瀏覽器中，矢量圖輸出，除官方提供各國(guó)地圖數(shù)據(jù)外，用戶可以使用數(shù)據(jù)轉(zhuǎn)換程序定制地圖數(shù)據(jù)。

?

這里基于jVectorMap插件制作中國(guó)地圖，其中近期有活動(dòng)進(jìn)行的省份區(qū)域變色顯示，點(diǎn)擊有活動(dòng)的省份區(qū)域，便打開對(duì)應(yīng)活動(dòng)列表頁面。

?

?

首先引入必需的文件，包括樣式表、jQuery框架、jVectorMap庫(kù)，中國(guó)地圖數(shù)據(jù)庫(kù)：

      <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>
    

?

地圖放置區(qū)域HTML標(biāo)簽：

      <div id="map"></div>
    

?

編寫JavaScript函數(shù)，實(shí)現(xiàn)所需功能：

      <script type="text/javascript">
$(function() {
　　/*id為中國(guó)省份標(biāo)識(shí)符，name為對(duì)應(yīng)省份名稱，兩者固定。event為活動(dòng)情況，
　　url為活動(dòng)列表頁面地址，數(shù)據(jù)可后臺(tái)動(dòng)態(tài)生成，這兩項(xiàng)有活動(dòng)的地區(qū)填寫，無則留空。*/
　　var dataStatus = [
　　　　{ id: 'HKG', name: '香港', event: '', url: '' },
　　　　{ id: 'HAI', name: '海南', event: '', url: '' },
　　　　{ id: 'YUN', name: '云南', event: '', url: '' },
　　　　{ id: 'BEJ', name: '北京', event: '(3個(gè)活動(dòng))', 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: '內(nèi)蒙古', 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個(gè)活動(dòng))', url: '/event/2' },
　　　　{ id: 'CHQ', name: '重慶', event: '', url: '' },
　　　　{ id: 'HUB', name: '湖北', event: '(1個(gè)活動(dòng))', 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: '臺(tái)灣', 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,
　　　　//顯示各地區(qū)名稱和活動(dòng)
　　　　onLabelShow: function (event, label, code) {
　　　　　　$.each(dataStatus, function (i, items) {
　　　　　　　　if (code == items.id) {
　　　　　　　　　　label.html(items.name + items.event);
　　　　　　　　}
　　　　　　});
　　　　},
　　　　//鼠標(biāo)移入省份區(qū)域，改變鼠標(biāo)狀態(tài)
　　　　onRegionOver: function(event, code){
　　　　　　$.each(dataStatus, function (i, items) {
　　　　　　　　if ((code == items.id) && (items.event != '')) {
　　　　　　　　　　$('#map').css({cursor:'pointer'});
　　　　　　　　}
　　　　　　});
　　　　},
　　　　//鼠標(biāo)移出省份區(qū)域，改回鼠標(biāo)狀態(tài)
　　　　onRegionOut: function(event, code){
　　　　　　$.each(dataStatus, function (i, items) {
　　　　　　　　if ((code == items.id) && (items.event != '')) {
　　　　　　　　　　$('#map').css({cursor:'auto'});
　　　　　　　　}
　　　　　　});
　　　　},
　　　　//點(diǎn)擊有活動(dòng)的省份區(qū)域，打開對(duì)應(yīng)活動(dòng)列表頁面
　　　　onRegionClick: function(event, code){
　　　　　　$.each(dataStatus, function (i, items) {
　　　　　　　　if ((code == items.id) && (items.event != '')) {
　　　　　　　　　　window.location.href = items.url;
　　　　　　　　}
　　　　　　});
　　　　}　　
　　});
　　//改變有活動(dòng)省份區(qū)域的顏色
　　$.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

?

?