管线设备坐标拾取 gengdidi

gassafety-web/src/components/mapDialog/index.vue → gassafety-web/src/components/mapDialog/checkDeviceLoaction.vue

@@ -23,10 +23,11 @@
       <el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button
       >
     </el-row>
-    <div style="width: 47vw; height: 57vh" id="container"></div>
+    <div style="width: 47vw; height: 65vh" id="container"></div>
 
     <el-col :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" style="position: fixed;margin-left: 3px;">搜索</el-button>
+      <el-input id="ss" placeholder="输入地址" v-model="keyWorld"  ></el-input>
+      <el-button size="small" type="primary" icon="el-icon-search" @click="search" style="position: fixed;margin-left: 3px;">搜索</el-button>
     </el-col>
 
   </el-dialog>
@@ -47,7 +48,10 @@
         keyWorld: ""
       }
     },
-    mounted(){
+    watch:{
+      dialogTableVisible:{
+        handler(value) {
+          if(value){
             let that = this;
             that.$nextTick(() => {
               //初始化地图
@@ -58,10 +62,9 @@
                 viewMode: "3D",
                 showLabel: true,
                 pitch: 8,
-          zoom: 10
+                zoom: 12
               });
-        map.setFitView();
-
+              var overlays = [];
               //坐标回显
               if (typeof that.slng == "number" && that.slng != 0) {
                 that.lnglat.lng = that.slng;
@@ -71,12 +74,12 @@
                 });
                 marker.setMap(map);
                 map.setCenter([that.slng,that.slat]);
+                overlays.push(marker);
               }
 
               //点击获取坐标点
               var mouseTool = new AMap.MouseTool(map);
               //监听draw事件可获取画好的覆盖物
-        var overlays = [];
               mouseTool.on('draw',function(e){
                 map.remove(overlays);
                 overlays.push(e.obj);
@@ -92,6 +95,12 @@
                 });
               });
             })
+          }
+        },
+        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
+        immediate: true
+
+      }
     },
     methods:{
       confirmFun(){
@@ -123,7 +132,7 @@
 
   .button{
     position: relative;
-    top: -393px;
+    top: -453px;
     left: 14px;
   }
 

gassafety-web/src/components/mapDialog/checkPipeLineLocation.vue

+<template>
+  <el-dialog
+    title="拾取坐标"
+    :visible.sync="dialogTableVisible"
+    :show-close="false"
+    :close-on-click-modal="false"
+  >
+    <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="container" 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);  //关键字查询查询
+      },
+      barClose() {
+        console.log("window");
+        this.deviceType = false;
+        // 关闭当前线条的infowindow
+        this.map.closeInfoWindow();
+        this.map.lineFlag = false;
+      },
+    },
+
+    beforeDestroy() {
+    },
+  }
+
+</script>
+
+<style scoped lang="scss">
+  .dialog{
+    position:relative;
+  }
+  #container{
+    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>