设备管理搜索、设备拖拽问题 gengdidi

gassafety-web/src/components/PopWindow/flowMeter.vue

@@ -108,6 +108,7 @@
                   this.map.remove(this.obj);
                   this.form.deviceId = response.data;
                   this.gaoMap.addMarker(this.gaoMap.deviceType,this.form);
+                  this.gaoMap.placeSearch.clear();
                   this.msgSuccess("新增成功");
                 }else{
                   this.msgSuccess("新增失败");

gassafety-web/src/components/PopWindow/regulatorBox.vue

@@ -81,6 +81,9 @@
         gaoMap : null
       }
     },
+    mounted(){
+      console.log(this.form.longitude,"===============")
+    },
     components: {
       FileUpload,
     },
@@ -108,6 +111,7 @@
                   this.map.remove(this.obj);
                   this.form.deviceId = response.data;
                   this.gaoMap.addMarker(this.gaoMap.deviceType,this.form);
+                  this.gaoMap.placeSearch.clear();
                   this.msgSuccess("新增成功");
                 }else{
                   this.msgSuccess("新增失败");

gassafety-web/src/components/PopWindow/valveWell.vue

@@ -108,6 +108,7 @@
                   this.map.remove(this.obj);
                   this.form.deviceId = response.data;
                   this.gaoMap.addMarker(this.gaoMap.deviceType,this.form);
+                  this.gaoMap.placeSearch.clear();
                   this.msgSuccess("新增成功");
                 }else{
                   this.msgSuccess("新增失败");

gassafety-web/src/utils/gaodeMap.js

@@ -208,34 +208,6 @@ class gaodeMap {
         return html;
       }
     }
-
-   /* let html = "<div>" +
-      "<table>" +
-      "<tr>" +
-      "<td>所属燃气公司</td>" +
-      "<td>正元</td>" +
-      "</tr>" +
-      "<tr>" +
-      "<td>名称</td>" +
-      "<td>1234</td>" +
-      "</tr>" +
-      "<tr>" +
-      "<td>地址</td>" +
-      "<td>石家庄市新华区</td>" +
-      "</tr>" +
-      "</table>" +
-      "</div>";
-    switch (this.markerType){
-      case DEVICE_TYPE.REGEULATORBOX :{
-        return html;
-      }
-      case DEVICE_TYPE.VALUEWELL :{
-        return html;
-      }
-      case DEVICE_TYPE.FLOWMETER :{
-        return html;
-      }
-    }*/
   }
 
   /**
@@ -512,9 +484,17 @@ class gaodeMap {
         device.obj = e.obj;
         device.gaoMap = that;
         e.obj.on("click", function(aa) {
+          console.log(aa,"fdsfdsfdsa===click")
           let postion = aa.target._position;
-          device.form.longitude = postion.lng;
-          device.form.latitude = postion.lat;
+          //兼容拖拽后单击事件，拖拽后点击事件返回位置为数组
+          if(postion instanceof Array){
+            device.form.longitude = postion[0];
+            device.form.latitude = postion[1];
+          }else{
+            device.form.longitude = postion.lng;
+            device.form.latitude = postion.lat;
+          }
+
           device.show();
         });
       }
@@ -616,5 +596,35 @@ class gaodeMap {
       }
     );
   }
+
+  searchTips(inputId){
+    let that = this;
+    AMap.plugin(['AMap.AutoComplete', 'AMap.PlaceSearch'], function () {
+      //输入提示
+      var autoOptions = {
+        input: inputId
+      };
+      var auto = new AMap.AutoComplete(autoOptions);
+      that.placeSearch = new AMap.PlaceSearch({
+        map: map
+      });
+      //构造地点查询类
+      auto.on('select', function(e){
+        console.log(e,"eeeeee========")
+        that.placeSearch.clear();
+        that.placeSearch.setCity(e.poi.adcode);
+        that.placeSearch.search(e.poi.name);  //关键字查询查询
+      })
+    })
+  }
+
+  searchKeyWord(keyWord){
+    AMap.plugin(['AMap.AutoComplete'], function () {
+      var placeSearch = new AMap.PlaceSearch({
+        map: map
+      });
+      placeSearch.search(keyWord);  //关键字查询查询
+    })
+  }
 }
 export default gaodeMap;

gassafety-web/src/views/enterprise/map/index.vue

 <template>
   <div>
     <div style="width: 100vw; height: 100vh" id="container"></div>
-    <!-- <div class="input-card" style='width: 24rem;'>
-      <div class="input-item">
-        <input type="radio" name='func' value='marker'><span class="input-text">画点</span>
-        <input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
-        <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
-      </div>
-      <div class="input-item">
-        <input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>
-        <input type="radio" name='func' value='circle'><span class="input-text">画圆</span>
-      </div>
-      <div class="input-item">
-        <input id="clear" type="button" class="btn" value="清除" />
-        <input id="close" type="button" class="btn" value="关闭绘图" />
-      </div>
-    </div>-->
+    <el-input v-model="keyWord" placeholder="点击输入" id="tipinput" class="search-input"/>
+    <el-button type="red" icon="el-icon-search" class="search-but" @click="search()">搜索</el-button>
     <el-button
       type="primary"
       style="position: absolute; top: 100px; left: 75%"
@@ -76,6 +63,7 @@ export default {
         inspectionTime: null,
         remarks: null
       },
+      keyWord:""
     };
   },
   mounted() {
@@ -96,6 +84,7 @@ export default {
     ];
     gaoMap.addPolyline(path);
     gaoMap.addMouseTool();
+    gaoMap.searchTips("tipinput");
     this.getDeviceInfo();
   },
   methods: {
@@ -109,11 +98,13 @@ export default {
       this.gaoMap.lineType =2;
       this.gaoMap.mapOperateType = "edit";
       this.gaoMap.addMarkerDragg();
+      this.gaoMap.placeSearch.clear();
     },
     deleteDevice() {
       this.deviceType = false;
       this.gaoMap.mapOperateType = "delete";
       this.gaoMap.removeMarkerDragg();
+      this.gaoMap.placeSearch.clear();
     },
     selectDeviceType(val) {
       // if("add" == this.operationType){
@@ -146,6 +137,10 @@ export default {
         this.loading = false;
       });
 
+    },
+    search(){
+      this.gaoMap.placeSearch.clear();
+      this.gaoMap.placeSearch.search(this.keyWord)
     }
   },
 };
@@ -226,5 +221,17 @@ input[type="radio"] {
   width: 4rem;
   margin-right: 1rem;
 }
+.search-input{
+  position: absolute;
+  top: 100px;
+  left: 2%;
+  width:240px;
+}
+.search-but{
+  position: absolute;
+  top: 100px; left: 19%;
+  width:85px;color: white;
+  background-color: #053B6A;
+}
 </style>