一、JQuery插件之 日本地图地区选择器
演示地址:http://takemaru-hirai.github.io/japan-map/
二、使用方法:
引用
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);
},
}
);
});
三、效果预览:
更多: