日本地圖選擇插件、日本地區選擇插件

一、JQuery插件之 日本地圖地區選擇器

• 源代碼名稱:japan-map
• 源代碼網址:http://www.github.com/takemaru-hirai/japan-map

演示地址：http://takemaru-hirai.github.io/japan-map/

 

二、使用方法：

引用

    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="./data/japan/jquery.japan-map.js"></script>

    <div id="map-container"></div>

js代碼：

 $(function () {

            var source = [{ "id": 3843, "text": "北海道地區 ", "children": [{ "id": 3844, "text": "北海道", "children": [] }] }, { "id": 3845, "text": "東北地區", "children": [{ "id": 3846, "text": "青森縣", "children": [] }, { "id": 3847, "text": "巖手縣", "children": [] }, { "id": 3848, "text": "宮城縣", "children": [] }, { "id": 3849, "text": "秋田縣", "children": [] }, { "id": 3850, "text": "山形縣", "children": [] }, { "id": 3851, "text": "福島縣", "children": [] }] }, { "id": 3852, "text": "關東地區", "children": [{ "id": 3853, "text": "茨城縣", "children": [] }, { "id": 3854, "text": "栃木縣", "children": [] }, { "id": 3855, "text": "羣馬縣", "children": [] }, { "id": 3856, "text": "埼玉縣", "children": [] }, { "id": 3857, "text": "千葉縣", "children": [] }, { "id": 3858, "text": "東京都", "children": [] }, { "id": 3859, "text": "神奈川縣", "children": [] }] }, { "id": 3860, "text": "中部地區", "children": [{ "id": 3861, "text": "新潟縣", "children": [] }, { "id": 3862, "text": "富山縣", "children": [] }, { "id": 3863, "text": "石川縣", "children": [] }, { "id": 3864, "text": "福井縣", "children": [] }, { "id": 3865, "text": "山梨縣", "children": [] }, { "id": 3866, "text": "長野縣", "children": [] }, { "id": 3867, "text": "岐阜縣", "children": [] }, { "id": 3868, "text": "靜岡縣", "children": [] }, { "id": 3869, "text": "愛知縣", "children": [] }] }, { "id": 3870, "text": "近畿地區", "children": [{ "id": 3871, "text": "滋賀縣", "children": [] }, { "id": 3872, "text": "京都府", "children": [] }, { "id": 3873, "text": "大阪府", "children": [] }, { "id": 3874, "text": "兵庫縣", "children": [] }, { "id": 3875, "text": "奈良縣", "children": [] }, { "id": 3876, "text": "和歌山縣", "children": [] }, { "id": 3898, "text": "三重縣", "children": [] }] }, { "id": 3877, "text": "中國地區", "children": [{ "id": 3878, "text": "鳥取縣", "children": [] }, { "id": 3879, "text": "島根縣", "children": [] }, { "id": 3880, "text": "岡山縣", "children": [] }, { "id": 3881, "text": "廣島縣", "children": [] }, { "id": 3882, "text": "山口縣", "children": [] }] }, { "id": 3883, "text": "四國地區", "children": [{ "id": 3884, "text": "德島縣", "children": [] }, { "id": 3885, "text": "香川縣", "children": [] }, { "id": 3886, "text": "愛媛縣", "children": [] }, { "id": 3887, "text": "高知縣", "children": [] }] }, { "id": 3888, "text": "九州地區", "children": [{ "id": 3889, "text": "福岡縣", "children": [] }, { "id": 3890, "text": "佐賀縣", "children": [] }, { "id": 3891, "text": "長崎縣", "children": [] }, { "id": 3892, "text": "熊本縣", "children": [] }, { "id": 3893, "text": "大分縣", "children": [] }, { "id": 3894, "text": "宮崎縣", "children": [] }, { "id": 3895, "text": "鹿兒島縣", "children": [] }] }, { "id": 3896, "text": "沖繩地區", "children": [{ "id": 3897, "text": "沖繩縣", "children": [] }] }];
            var num = 0;
            var areas = [];
            for (var i = 0; i < source.length; i++) {
                for (var j = 0; j < source[i].children.length; j++) {
                    num++;
                    var item = source[i].children[j];
                    areas.push({
                        code: num,
                        name: item.text,
                        "color": "#CCCCCC",
                        "hoverColor": "#91c900",
                        prefectures: [num]
                    });

                }
            }

            $("#map-container").japanMap(
                {
                    areas: areas,
                    selection: "area",
                    borderLineWidth: 0.25,
                    drawsBoxLine: false,
                    movesIslands: true,
                    showsAreaName: true,
                    width: 900,
                    fontSize: 12,
                    fontColor: "areaColor",
                    fontShadowColor: "black",
                    backgroundColor: "#f2fcff",
                    onSelect: function (data) {
                        console.info(data);
                    },
                }
            );
        });

三、效果預覽：

 

更多：

 JQuery手機版日期選擇控件之jdate(jquery-date)

 

JQuery.dataTables免費開源的數據表格插件

 jquery.fly.js實現添加購物車效果、實現拋物線運動