1. 程式人生 > >jquery中國地圖插件

jquery中國地圖插件

中國 read adding 捐贈 顏色 mar pre 使用 ctype

插件下載地址:

http://www.17sucai.com/preview/1266961/2018-09-18/map/js/jsMap-1.1.0.min.js

jsMap

項目介紹

這是一個功能豐富的 jQuery 地圖插件,采用 SVG 技術清晰的展示了中國地圖,它擁有非常全面的參數接口,可以讓開發者根據實際需求靈活配置。

網站地址:(http://jsmap.applinzi.com/)

兼容情況

兼容支持 SVG 的瀏覽器。

如何使用

  1. 引入 jQuery 文件;
  2. 引入 jsMap 文件;
  3. 通過 jsMap.config 配置地圖即可。

程序 demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jsMap Demo</title>
        <script src="jquery.min.js"></script>
        <script src="jsMap.min.js"></script>
        <script>
            $(function () {
                jsMap.config("#container", {
                    name: "china",
                    width: 900,
                    height: 500
                });
            })
        </script>
    </head>
    <body>
	    
        <div id="container"></div>

    </body>
</html>

參數屬性

屬性說明類型默認值
name 地圖名稱,設置 china 則繪制中國地圖,若要設置省份的地圖,需要傳入該省份的漢語全拼(註意:山西是 shanxi,陜西是 shaanxi) String china
width 地圖容器的寬度 Number 800
height 地圖容器的高度 Number 500
strokeColor 描邊顏色 String #fff
strokeWidth 描邊寬度 Number 1
fill 填充顏色 String / Object #3f99f9
hoverFill 鼠標懸浮時的填充顏色 String / Object #fff11c
areaName 是否顯示地區名稱,可選值 true / false Boolean false
areaNameColor 地區名稱的文字顏色 String #000
hoverTip 鼠標懸浮時的內容展示 Boolean / Function 當前地區名稱
hoverCallback 鼠標懸浮時的回調函數,參數分別是:id 和 name Function 空函數
clickCallback 鼠標點擊時的回調函數,參數分別是:id 和 name Function 空函數
clickHighLight 鼠標點擊時高亮顏色,true 則使用默認顏色,false 無高亮效果,String 自定義顏色 Boolean / String #dd2d01
?捐贈?

jquery中國地圖插件