您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)非常好用的jQuery矢量地圖生成插件有哪些,文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
是不是也考慮生成一個(gè)矢量類(lèi)型的地圖?
今天我們將介紹的這款jQuery插件 - JQVMAP 可 以方便的幫助你生成漂亮的矢量地圖。在現(xiàn)代瀏覽器中它使用了SVG(Scalable Vector Graphics)技術(shù)生成地圖圖片,如果你也需要支持老版本的瀏覽器,例如,IE6/7/8的話(huà),它也可以通過(guò)VML來(lái)實(shí)現(xiàn),非常不錯(cuò)的jQuery插 件,相信大家一定會(huì)喜歡!
主要特性
支持現(xiàn)代瀏覽器,同時(shí)對(duì)于老版本瀏覽器也可以通過(guò)其它fallback方式支持
支持縮放,拖動(dòng)查看
提供豐富的地圖生成參數(shù)
目前支持:世界地圖,美國(guó)地圖,歐洲,德國(guó)地圖
你可以自己定義自己的地圖(當(dāng)然,這個(gè)過(guò)程比較繁瑣)
實(shí)時(shí)更新地圖
需要jQuery類(lèi)庫(kù)支持
完整清晰的文檔說(shuō)明
如何使用
JQVAMP使用非常簡(jiǎn)單,導(dǎo)入jQuery類(lèi)庫(kù)和插件類(lèi)庫(kù),如下:
<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 + '"'); } }); });
插件的文檔非常完善,你可以很方便的查看相關(guān)的選項(xiàng)和callback方法。
上述就是小編為大家分享的非常好用的jQuery矢量地圖生成插件有哪些了,如果剛好有類(lèi)似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。