非常好用的jQuery矢量地圖生成插件有哪些

這期內容當中小編將會給大家帶來有關非常好用的jQuery矢量地圖生成插件有哪些，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

是不是也考慮生成一個矢量類型的地圖？

今天我們將介紹的這款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矢量地圖生成插件有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。