可搜索+拖动的高德地图组件

46 阅读 0 评论 31 点赞

我是靠谱客的博主忧郁学姐，最近开发中收集的这篇文章主要介绍可搜索+拖动的高德地图组件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

组件的使用请参考vue+ElementUI+高德API地址模糊搜索（自定义UI组件） - Lena_叶 - 博客园

这里对收起后添加了一个展开功能的优化处理

1.在收起按钮后新增一个展开按钮，显示条件如下：

并把收起的点击事件修改为以下方法

 <div>
                <el-button
                  v-show="snameMapShow"
                  type="text"
                  size="mini"
                  @click="showMap"
                  >收起<i class="el-icon-caret-top"></i
                ></el-button>
              </div>
 <div>
              <el-button
                v-show="
                  snameMapShow == false &&
                    editForm.slat !== 0 &&
                    btnMapShow == true
                "
                type="text"
                size="mini"
                @click.stop="snameMapShow = true"
                >展开<i class="el-icon-caret-bottom"></i
              ></el-button>
             </div>

2.在data中新增

3.点击收起时显示展开并隐藏地图

  showMap() {
      this.snameMapShow = false;
      this.btnMapShow = true;
    },

4.编辑时的方法把btnMapshow设置为false

   // 编辑信息
    edit(row) {
      this.dialogItem.title = "编辑厂区信息";
      this.editForm.createTime = row.createTime;
      this.editForm.siteNum = row.siteNum;
      this.editForm.siteName = row.siteName;
      this.editForm.id = row.id;
      this.editForm.sname = row.siteAddress;
      this.editForm.slon = row.longitude;
      this.editForm.slat = row.latitude;
      this.editForm.remark = row.remark;
      this.btnMapShow = false;
      this.$refs.mdgDialog.importDialogShown = true;
    },

5.新增厂区时要将数据和按钮都复原

// 新增厂区
    addFactor() {
      this.editForm = {
        id: "",
        siteNum: "",
        siteName: "",
        sname: "",
        slat: 0,
        slon: 0,
        remark: ""
      };
      this.snameMapShow = false;
      this.btnMapShow = true;
      this.$refs.mdgDialog.importDialogShown = true;
    },