超棒的jQuery矢量地圖生成插件 - JQVAMP

日期：2012-5-14  來源：GBin1.com

在線演示  本地下載

是否是也考慮生成一個矢量類型的地圖？今天咱們將介紹的這款jQuery插件 - JQVMAP 可 以方便的幫助你生成漂亮的矢量地圖。在現代瀏覽器中它使用了SVG（Scalable Vector Graphics）技術生成地圖圖片，若是你也須要支持老版本的瀏覽器，例如，IE6/7/8的話，它也能夠經過VML來實現，很是不錯的jQuery插 件，相信你們必定會喜歡！

主要特性

• 支持現代瀏覽器，同時對於老版本瀏覽器也能夠經過其它fallback方式支持
• 支持縮放，拖動查看
• 提供豐富的地圖生成參數
• 目前支持：世界地圖，美國地圖，歐洲，德國地圖
• 你能夠本身定義本身的地圖（固然，這個過程比較繁瑣）
• 實時更新地圖
• 須要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方法。相信你們確定有機會應用到本身的網站開發和設計中，但願你們喜歡，若是你有任何問題和建議請給咱們留言，謝謝！

來源：超棒的jQuery矢量地圖生成插件 - JQVAMP