checkPipeLineLocation.vue

<template>
  <el-dialog
    title="拾取坐标"
    :visible.sync="dialogTableVisible"
    :before-close="handleClose"
  >
    <div style="postion:relative">
      <el-row :span="8" class="button">
        <el-input id="ss" placeholder="输入地址" v-model="keyWorld"  ></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-row>
    </div>
    <div style="" id="container1" ref="elD"></div>
    <el-row class="lt">
      <el-button type="primary" size="small" @click="confirmFun">确定</el-button>
      <el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
  import gaodeMap from "./js/gaodeMapDialog.js";
  import { getString } from "@/utils/gassafety.js";
  export default {
    props: {
      dialogTableVisible: {
        type:Boolean,
      },
      slat: 0,
      slng: 0,
      str:{
        type:String,
      }

    },
    data(){
      return{
        lnglat: {
          lat: "",
          lng: ""
        },
        keyWorld: "",
        map:{},
        div:null,

      }
    },
    watch:{
      dialogTableVisible:{
        handler(value) {
          if(value){
            window.addEventListener("click", this.barClose);
            this.$nextTick(() => {
              this.map = new gaodeMap("石家庄");
              this.map.addMouseTool();
              if(this.str){
                this.map.addPolyline([{coordinates:this.str}]);
              }

              this.map.lineType = 1;
              if (this.map.newLineObj == null) {
                this.map.createNewLine();
              }

            })
          }else{
             console.log("清除事件")
            window.removeEventListener("click", this.barClose);
          }
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true

      }
    },
    methods:{
      confirmFun(){
        console.log("path",this.map.newLineObj.getPath())
        const pathArr = this.map.newLineObj.getPath().map(item=>{
          return [
            item.lng,item.lat
          ]
        })
        const str = getString(pathArr)
        this.$emit('confirmFun',str);
        this.$emit('dialogcancelFun');
      },
      search(){
        this.placeSearch.search(this.keyWorld);  //关键字查询查询
      },
      handleClose(){
        this.$emit('dialogcancelFun');
      },
      barClose() {
        console.log("window");
        this.deviceType = false;
        // 关闭当前线条的infowindow
        this.map.closeInfoWindow();
        this.map.lineFlag = false;
      },
    },

    beforeDestroy() {
    },
  }

</script>

<style scoped lang="scss">
  .dialog{
    position:relative;
  }
  #container1{
    width: 100%;
    height: 500px;
  }
  .lt{
    margin-top: 15px;
    text-align: right;
  }
  .lt .el-input {
    width: 120px;
    margin-right: 15px;
    display: inline-block;
  }

  .button{
    position: absolute;
    top: 90px;
    left: 30px;
    z-index: 999;
  }

  .button .el-input{
    width: 180px;
    margin-right: 10px;
    display: inline-block;
  }
</style>