javascript: markmap
json
[
{
"name": "中国",
"children": [
{
"name": "北京市",
"children": [
{
"name": "市辖区",
"children": [
{
"name": "东城区",
"children": [
{
"name": "交道口街道",
"children": [
{
"name": "[交东社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[大兴社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[鼓楼苑社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[南锣鼓巷社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[福祥社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[府学社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[菊儿社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
}
]
},
{
"name": "东华门街道",
"children": [
{
"name": "[多福巷社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[东厂社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[南池子社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[正义路社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[韶九社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[银闸社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[智德社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[灯市口社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[台基厂社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[王府井社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
}
]
}
]
},
{
"name": "西城区",
"children": [
{
"name": "西长安街街道",
"children": [
{
"name": "[府右街南社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[北新华街社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[和平门社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[太仆寺街社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[义达里社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[未英社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[西交民巷社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[六部口社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[钟声社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[西黄城根南街社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[西单北社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
}
]
},
{
"name": "新街口街道",
"children": [
{
"name": "[西里二区社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[西里四区社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[西里三区社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[西四北头条社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[西四北六条社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[前公用社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[南小街社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[大觉社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[安平巷社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[宫门口社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[中直社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[宫门口社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[西里一区社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[北草厂社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[玉桃园社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[西四北三条社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[育德社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[半壁街社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[冠英园社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[富国里社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[官园社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
},
{
"name": "[北顺社区居委会](http://www.dusystem.com)",
"places": ["林海花园"]
}
]
}
]
}
]
}
]
},
{
"name": "江西省",
"children": [
{
"name": "吉安市",
"children": [
{
"name": "青原区",
"children": [
{
"name": "河东街道",
"children": [
{
"name": "新生社区居委会",
"places": ["小花园","大花园"]
},
{
"name": "铁路社区居委会",
"places": ["小花园"]
},
{
"name": "贸易广场社区居委会",
"places": ["小花园"]
},
{
"name": "梅苑社区居委会",
"places": ["小花园"]
},
{
"name": "科教社区居委会",
"places": ["小花园"]
},
{
"name": "赣江村委会",
"places": ["小花园"]
},
{
"name": "浒岗村委会",
"places": ["小花园"]
},
{
"name": "胜利村委会",
"places": ["小花园"]
},
{
"name": "菱塘村委会",
"places": ["小花园"]
},
{
"name": "夏家村委会",
"places": ["小花园"]
},
{
"name": "梅林村委会",
"places": ["小花园"]
}
]
},
{
"name":" 滨江街道",
"children": [
{
"name": "新桥社区居委会",
"places": ["小花园","大花园"]
},
{
"name": "红光社区居委会",
"places": ["小花园","大花园"]
},
{
"name": "麻家社区居委会",
"places": ["小花园","大花园"]
},
{
"name": "祥和社区居委会",
"places": ["小花园","大花园"]
},
{
"name": "凌波渡社区居委会",
"places": ["小花园","大花园"]
},
{
"name": "友谊村委会",
"places": ["小花园","大花园"]
}
]
}
]
},
{
"name": "永丰县",
"children": [
{
"name": "恩江镇",
"children": [
{
"name": "八一居委会",
"places": ["涂家村"]
},
{
"name": "民主居委会",
"places": ["涂家村"]
},
{
"name": "开吉居委会",
"places": ["涂家村"]
},
{
"name": "贯岭居委会",
"places": ["涂家村"]
},
{
"name": "大园社区居委会",
"places": ["涂家村"]
},
{
"name": "尹家坪居委会",
"places": ["涂家村"]
},
{
"name": "永叔居委会",
"places": ["涂家村"]
},
{
"name": "城南居委会",
"places": ["涂家村"]
},
{
"name": "水南背社区居民委员会",
"places": ["涂家村"]
},
{
"name": "岭上村委会",
"places": ["涂家村"]
},
{
"name": "洋陂坑村委会",
"places": ["涂家村"]
},
{
"name": "泽泉村委会",
"places": ["涂家村"]
},
{
"name": "金香居委会",
"places": ["涂家村"]
},
{
"name": "塘仔角居委会",
"places": ["涂家村"]
},
{
"name": "天保居委会",
"places": ["涂家村"]
},
{
"name": "肖家社区居委会",
"places": ["涂家村"]
},
{
"name": "聂家居委会",
"places": ["涂家村"]
},
{
"name": "北晖居委会",
"places": ["涂家村"]
},
{
"name": "东湖居委会",
"places": ["涂家村"]
},
{
"name": "花园社区居民委员会",
"places": ["涂家村"]
},
{
"name": "石桥村委会",
"places": ["涂家村"]
},
{
"name": "营前村委会",
"places": ["涂家村"]
},
{
"name": "大山村委会",
"places": ["涂家村"]
}
]
},
{
"name": "沿陂镇",
"children": [
{
"name": "江口社区居委会",
"places": ["涂家村"]
},
{
"name": "吉江村委会",
"places": ["涂家村"]
},
{
"name": "芦下村委会",
"places": ["涂家村"]
},
{
"name": "下袍村委会",
"places": ["涂家村"]
},
{
"name": "枧头村委会",
"places": ["涂家村"]
},
{
"name": "谷陂村委会",
"places": ["涂家村"]
},
{
"name": "毛家村委会",
"places": ["涂家村"]
},
{
"name": "枧田村委会",
"places": ["涂家村"]
},
{
"name": "水东村委会",
"places": ["涂家村"]
},
{
"name": "涂家村委会",
"places": ["涂家村","艾家村"]
},
{
"name": "彭溪村委会",
"places": ["涂家村"]
},
{
"name": "尺江村委会",
"places": ["涂家村"]
},
{
"name": "洄陂村委会",
"places": ["涂家村"]
}
]
}
]
}
]
}
]
},
{
"name": "广东省",
"children": [
{
"name": "深圳市",
"children": [
{
"name": "罗湖区",
"children": [
{
"name": "东晓街道",
"children": [
{
"name": "东晓社区居民委员会",
"places": ["江海花园"]
},
{
"name": "松泉社区居民委员会",
"places": ["江海花园"]
},
{
"name": "独树社区居民委员会",
"places": ["江海花园"]
},
{
"name": "兰花社区居民委员会",
"places": ["江海花园"]
},
{
"name": "草埔东社区居民委员会",
"places": ["江海花园"]
},
{
"name": "名地社区居民委员会",
"places": ["江海花园"]
},
{
"name": "绿景社区居民委员会",
"places": ["江海花园"]
},
{
"name": "木棉岭社区居民委员会",
"places": ["江海花园"]
}
]
},
{
"name": "桂园街道",
"children": [
{
"name": "大塘龙社区居民委员会",
"places": ["江海花园"]
},
{
"name": "人民桥社区居民委员会",
"places": ["江海花园"]
},
{
"name": "红南社区居民委员会",
"places": ["江海花园"]
},
{
"name": "滨苑社区居民委员会",
"places": ["江海花园"]
},
{
"name": "老围社区居民委员会",
"places": ["江海花园"]
},
{
"name": "洪围社区居民委员会",
"places": ["江海花园"]
},
{
"name": "桂木园社区居民委员会",
"places": ["江海花园"]
},
{
"name": "红岭社区居民委员会",
"places": ["江海花园"]
},
{
"name": "红村社区居民委员会",
"places": ["江海花园"]
},
{
"name": "鹿丹村社区居民委员会",
"places": ["江海花园"]
},
{
"name": "松园社区居民委员会",
"places": ["江海花园"]
},
{
"name": "新围社区居民委员会",
"places": ["江海花园"]
}
]
}
]
},
{
"name": "福田区",
"children": [
{
"name": "南园街道",
"children": [
{
"name": "沙埔头社区居委会",
"places": ["江海花园"]
},
{
"name": "南华社区居委会",
"places": ["江海花园"]
},
{
"name": "巴登社区居委会",
"places": ["江海花园"]
},
{
"name": "锦龙社区居委会",
"places": ["江海花园"]
},
{
"name": "南园社区居委会",
"places": ["江海花园"]
},
{
"name": "滨河社区居委会",
"places": ["江海花园"]
},
{
"name": "滨江社区居委会",
"places": ["江海花园"]
},
{
"name": "赤尾社区居委会",
"places": ["江海花园"]
}
]
},
{
"name": "园岭街道",
"children": [
{
"name": "红荔社区居委会",
"places": ["江海花园"]
},
{
"name": "长城社区居委会",
"places": ["江海花园"]
},
{
"name": "上林社区居委会",
"places": ["江海花园"]
},
{
"name": "南天社区居委会",
"places": ["江海花园"]
},
{
"name": "园东社区居委会",
"places": ["江海花园"]
},
{
"name": "鹏盛社区居委会",
"places": ["江海花园"]
},
{
"name": "华林社区居委会",
"places": ["江海花园"]
}
]
},
{
"name": "福田街道",
"children": [
{
"name": "福华社区居委会",
"places": ["江海花园"]
},
{
"name": "福山社区居委会",
"places": ["江海花园"]
},
{
"name": "水围社区居委会",
"places": ["江海花园"]
},
{
"name": "岗厦社区居委会",
"places": ["江海花园"]
},
{
"name": "福田社区居委会",
"places": ["江海花园"]
},
{
"name": "福南社区居委会",
"places": ["江海花园"]
},
{
"name": "圩镇社区居委会",
"places": ["江海花园"]
},
{
"name": "福安社区居委会",
"places": ["江海花园"]
},
{
"name": "福安社区居委会",
"places": ["江海花园"]
},
{
"name": "福民社区居委会",
"places": ["江海花园"]
},
{
"name": "渔农社区居委会",
"places": ["江海花园"]
},
{
"name": "海滨社区居委会",
"places": ["江海花园"]
},
{
"name": "皇岗社区居委会",
"places": ["江海花园"]
},
{
"name": "口岸社区居委会",
"places": ["江海花园"]
}
]
}
]
}
]
}
]
}
]
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Markmap</title>
<style>
svg.markmap {
width: 100%;
height: 100vh;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@0.18"></script>
</head>
<body>
<div class="markmap">
<script type="text/template">
---
markmap:
maxWidth: 500
colorFreezeLevel: 18
---
# 中国
## 北京市
### 市辖区
#### 东城区
##### 交道口街道
###### 交东社区居委会
- 林海花园
- 江海花园
## 江西省
### 吉安市
#### 永丰县
##### 恩江镇
###### 八一居委会
- 涂家村
- 艾家村
##### 沿陂镇
###### 涂家村委
- 涂家村
- 艾家村
## 广东省
### 深圳市
#### 罗湖区
##### 东晓街道
###### 兰心社区
- 江海花园
- 江心花园
###### 田心社区
- 江海花园
- 江心花园
##### 桂园街道
###### 大塘龙社区居民委员会
- 江海花园
- 江心花园
</script>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行政区划地图</title>
<style>
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.loading { text-align: center; padding: 50px; font-size: 18px; }
svg.markmap { width: 100%; height: 80vh; }
</style>
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@0.18"></script>
</head>
<body>
<div class="container">
<h1>中国行政区划地图</h1>
<div id="markmap-container" class="markmap">
<div class="loading">
<i class="fa fa-spinner fa-spin"></i> 加载数据中...
</div>
</div>
</div>
<script>
// 从JSON文件加载数据并生成markmap
fetch('administrative_division.json')
.then(response => {
if (!response.ok) {
throw new Error('数据加载失败: ' + response.status);
}
return response.json();
})
.then(data => {
// 生成markmap的markdown内容
const markdownContent = generateMarkdown(data);
// 创建script元素并设置为text/template类型
const scriptElement = document.createElement('script');
scriptElement.type = 'text/template';
// 设置script内容为生成的markdown
scriptElement.textContent = `
---
markmap:
maxWidth: 500
colorFreezeLevel: 8
---
${markdownContent}
`;
// 清空加载提示并添加script元素
const container = document.getElementById('markmap-container');
container.innerHTML = '';
container.appendChild(scriptElement);
})
.catch(error => {
console.error('加载行政区划数据时出错:', error);
const container = document.getElementById('markmap-container');
container.innerHTML = `<div class="error" style="color: red; text-align: center; padding: 5px;">
<i class="fa fa-exclamation-triangle"></i> 加载数据失败: ${error.message}
</div>`;
});
// 递归生成markdown内容的函数
function generateMarkdown(data, level = 1) {
let result = '';
// 处理数组类型数据
if (Array.isArray(data)) {
data.forEach(item => {
result += generateMarkdown(item, level);
});
return result;
}
// 处理对象类型数据
if (typeof data === 'object' && data !== null) {
// 添加标题行
if (data.name) {
const heading = '#'.repeat(level) + ' ' + data.name;
result += heading + '\n';
}
// 处理子项
if (data.children && data.children.length > 0) {
result += generateMarkdown(data.children, level + 1);
}
// 处理地点
if (data.places && data.places.length > 0) {
data.places.forEach(place => {
result += `- ${place}\n`;
});
}
return result;
}
// 默认情况，直接返回数据
return data + '\n';
}
</script>
</body>
</html>
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
浙公网安备 33010602011771号