echarts 金门地图json

您可以在 echarts 官网的示例库中找到金门地图的示例，并从中获取 json 数据。具体步骤如下：

1. 打开 echarts 官网：https://www.echartsjs.com/examples/zh/index.html
2. 在搜索框中输入“金门”，点击搜索按钮。
3. 在搜索结果中找到“金门地图”示例，点击进入。
4. 在示例页面中，点击“打开控制台”按钮，打开开发者工具。
5. 在控制台中，可以看到地图数据的 json 数据，拷贝该数据即可。

请注意，echarts 官方提供的地图数据仅供个人学习、研究使用，请勿用于商业用途。如果需要商业使用，请自行购买相关地图数据或获得数据提供商的授权。

相关问题

美国地图城市下钻json

美国地图城市下钻JSON是一个以JSON格式存储和呈现美国城市地图数据的方式。下钻是指从较高层次的概览地图逐步细化到更详细的地区、城市和街道级别。

JSON（JavaScript对象表示法）是一种轻量级的数据交换格式，常用于Web应用中传递和存储数据。使用JSON格式存储美国城市地图数据可以方便地在Web应用中进行数据的动态加载和呈现。

美国地图城市下钻JSON的数据结构可以如下所示：

{
"国家": "美国",
"州": [
{
"名称": "纽约州",
"城市": [
{
"名称": "纽约",
"街道": [
"曼哈顿",
"布鲁克林",
"皇后区",
"布朗克斯"
]
},
{
"名称": "水牛城",
"街道": [
"市中心",
"东区",
"南区",
"西区"
]
}
]
},
{
"名称": "加州",
"城市": [
{
"名称": "洛杉矶",
"街道": [
"好莱坞",
"比佛利山庄",
"圣莫尼卡"
]
},
{
"名称": "旧金山",
"街道": [
"旧金山市区",
"海湾区",
"金门公园"
]
}
]
}
]
}

以上JSON示例展示了美国的两个州（纽约和加州）的城市和街道数据。通过解析这个JSON数据，可以在Web应用中实现城市地图的下钻功能。用户可以先选择州的概览地图，然后根据选择的州进一步选择具体的城市和街道。这样，用户可以逐级地浏览美国地图中更为详细的信息，从国家到州、城市、街道。

实现一个vue树形搜索功能

好的，下面我将给出一个基于 Vue 的树形搜索功能的代码示例。

首先，我们需要构建一个树形结构，这里我用一个简单的数据示例：

const treeData = [
  {
    id: 1,
    name: '中国',
    children: [
      {
        id: 2,
        name: '北京',
        children: [
          {
            id: 3,
            name: '朝阳区'
          },
          {
            id: 4,
            name: '海淀区'
          }
        ]
      },
      {
        id: 5,
        name: '上海',
        children: [
          {
            id: 6,
            name: '浦东新区'
          },
          {
            id: 7,
            name: '徐汇区'
          }
        ]
      }
    ]
  },
  {
    id: 8,
    name: '美国',
    children: [
      {
        id: 9,
        name: '纽约',
        children: [
          {
            id: 10,
            name: '曼哈顿'
          },
          {
            id: 11,
            name: '布鲁克林'
          }
        ]
      },
      {
        id: 12,
        name: '旧金山',
        children: [
          {
            id: 13,
            name: '金门公园'
          },
          {
            id: 14,
            name: '旧金山湾'
          }
        ]
      }
    ]
  }
]

接着，我们可以创建一个 Vue 组件来表示每一个节点：

<template>
  <div>
    <span>{{ node.name }}</span>
    <ul v-if="node.children">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :keyword="keyword"
        @search="search"
      ></tree-node>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    },
    keyword: {
      type: String,
      default: ''
    }
  },
  methods: {
    search(keyword) {
      this.$emit('search', keyword)
    }
  }
}
</script>

在上面的代码中，我们使用递归组件来自动渲染子节点。每个节点包含一个名称和一个子节点数组，可以通过 props 来传递。同时，我们还添加了一个名为 `keyword` 的 prop 用于接收搜索关键字。在组件内部，我们使用 `v-if` 指令来判断是否存在子节点，并使用 `v-for` 指令循环渲染子节点。

接下来，我们需要在页面中添加一个搜索框和一个搜索结果展示区：

<template>
  <div>
    <div>
      <input type="text" v-model="searchKeyword" />
      <button @click="search">搜索</button>
    </div>
    <div v-if="searchResult.length">
      <ul>
        <li v-for="node in searchResult" :key="node.id">
          {{ node.name }}
        </li>
      </ul>
    </div>
    <div v-else>未找到匹配节点</div>
    <div>
      <tree-node
        v-for="node in treeData"
        :key="node.id"
        :node="node"
        :keyword="searchKeyword"
        @search="search"
      ></tree-node>
    </div>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  name: 'TreeSearch',
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [
        // 树形结构数据
      ],
      searchKeyword: '',
      searchResult: []
    }
  },
  methods: {
    search() {
      this.searchResult = []
      this.treeData.forEach(node => {
        this.searchNode(node)
      })
    },
    searchNode(node) {
      if (node.name.includes(this.searchKeyword)) {
        this.searchResult.push(node)
      }
      if (node.children) {
        node.children.forEach(child => {
          this.searchNode(child)
        })
      }
    }
  }
}
</script>

在上面的代码中，我们首先引入了之前定义的 `TreeNode` 组件，并使用 `v-for` 指令循环渲染树形结构。同时，我们添加了一个搜索框和一个搜索按钮，用户可以输入关键字并点击按钮进行搜索。在搜索方法中，我们使用 `Array.prototype.forEach()` 方法遍历整个树形结构，并递归搜索每个节点，如果节点的名称包含关键字，则将该节点添加到搜索结果列表中。最后，我们在页面中使用 `v-if` 指令来判断是否存在搜索结果，并使用 `v-for` 指令渲染搜索结果列表。

这样，一个简单的树形搜索功能就实现了。你可以根据自己的需求进行修改和扩展。