m0_75267276 2023-02-15 11:06 采纳率: 50%
浏览 40
已结题

elementui树形控件vue高德地图

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

  • 写回答

5条回答 默认 最新

  • mine_wz 2023-02-15 11:13
    关注

    要实现点击树形控件后在地图上显示相应位置,并且在高密市位置上用点标记进行标注,可以使用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>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 2月23日
  • 已采纳回答 2月15日
  • 修改了问题 2月15日
  • 创建了问题 2月15日

悬赏问题

  • ¥30 STK matlab python仿真
  • ¥15 关于IMageEnView 图标定位问题
  • ¥20 求解答(matlab)
  • ¥30 ffmpeg库使用过程中遇到的问题
  • ¥15 pyqt5 中python如何通过Qtwebchannel主动发消息给web前端
  • ¥15 关于HTML中title获取xml内容的问题
  • ¥15 fanuc机器人PRIO083数字信号未复原错误,如何解决?
  • ¥20 如何为现有电路板增加远程控制功能
  • ¥15 UE5打包失败,求解决
  • ¥15 请问STM32G431的CANOPEN协议函数怎么写