非常好的jQuery矢量地圖生成插件
是不是也考慮生成一個矢量類型的地圖?今天我們將介紹的這款jQuery插件 - ??JQVMAP ??可 以方便的幫助你生成漂亮的矢量地圖。在現(xiàn)代瀏覽器中它使用了SVG(Scalable Vector Graphics)技術生成地圖圖片,如果你也需要支持老版本的瀏覽器,例如,IE6/7/8的話,它也可以通過VML來實現(xiàn),非常不錯的jQuery插 件,相信大家一定會喜歡!
主要特性
支持現(xiàn)代瀏覽器,同時對于老版本瀏覽器也可以通過其它fallback方式支持
支持縮放,拖動查看
提供豐富的地圖生成參數(shù)
目前支持:世界地圖,美國地圖,歐洲,德國地圖
你可以自己定義自己的地圖(當然,這個過程比較繁瑣)
實時更新地圖
需要jQuery類庫支持
完整清晰的文檔說明
如何使用
JQVAMP使用非常簡單,導入jQuery類庫和插件類庫,如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
<script src="../jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="../jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
地圖插件生成代碼:
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#202020',
color: '#5DB0E6',
hoverOpacity: 0.7,
selectedColor: '#333333',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
onRegionOver: function(element, code, region){
$('#region').html(region);
},
onRegionClick: function(element, code, region){
$('#region').html('You selected "' + region + '"');
}
});
});
插件的文檔非常完善,你可以很方便的查看相關的選項和callback方法。相信大家肯定有機會應用到自己的網(wǎng)站開發(fā)和設計中,希望大家喜歡,如果你有任何問題和建議請給我們留言,謝謝!