elementui树形控件vue高德地图

Question

点击树形控件以后地图可以显示相应位置，点击树形控件中的高密市，地图显示高密市的位置同时用点标记显示出来

Answer 1

要实现点击树形控件后在地图上显示相应位置，并且在高密市位置上用点标记进行标注，可以使用Vue.js框架和高德地图API。
1.在Vue.js中使用ElementUI的树形控件(Tree)组件，代码如下：

<template>
  <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '山东省',
          children: [
            {
              label: '济南市',
              children: [
                { label: '历下区', location: [117.083, 36.682] },
                { label: '市中区', location: [116.998, 36.654] },
                { label: '天桥区', location: [116.987, 36.693] },
                { label: '历城区', location: [117.063, 36.681] }
              ]
            },
            {
              label: '青岛市',
              children: [
                { label: '市南区', location: [120.379, 36.075] },
                { label: '市北区', location: [120.380, 36.100] },
                { label: '崂山区', location: [120.467, 36.102] },
                { label: '李沧区', location: [120.432, 36.160] }
              ]
            },
            {
              label: '淄博市',
              children: [
                { label: '张店区', location: [118.022, 36.807] },
                { label: '淄川区', location: [117.967, 36.643] },
                { label: '博山区', location: [117.855, 36.494] },
                { label: '临淄区', location: [118.309, 36.822] }
              ]
            },
            {
              label: '高密市',
              location: [119.755, 36.384]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick(data) {
      // 获取当前节点的位置信息
      const location = data.location;
      if (location) {
        // 在地图上显示位置，并用点标记进行标注
        const marker = new AMap.Marker({
          position: location,
          map: this.map
        });
        this.map.setCenter(location);
        this.map.setZoom(13);
      }
    }
  }
}
</script>