导航修改

screen-demo/src/views/templateInstance.vue

@@ -64,20 +64,22 @@
     </div>
     <div class="another-container">
       <el-cascader
+          v-model="clickTree"
           placeholder="选择省市"
           :options="trees"
           filterable
           popper-class="mzfs-cascader"
+          @change="setValue"
+          :show-all-levels="false"
       ></el-cascader>
       <div class="input-container">
-        <!-- @focus="open=true" -->
         <el-input placeholder="请输入关键词" v-model="input3" class="input-with-select">
-          <el-button slot="append" icon="el-icon-search" @click="setValue" ></el-button>
-          <span slot="append" class="nav"></span>
+          <el-button slot="append" icon="el-icon-search" @click="keywordPoint(input3)" ></el-button>
+          <span slot="append" class="nav" @click="open=true" ></span>
                 <template #prepend></template>
         </el-input>
       </div>
-      <div  class="router-wraps" v-if="open" style="top: calc(100% + 2px); margin-top: 4px; left: 117px;">
+      <div  class="router-wraps" v-if="open" >
         <div style="width: 90%"><!---->
           <el-input placeholder="请输入起点" v-model="start" @focus="focus1(0)">
           </el-input>
@@ -276,7 +278,8 @@ export default {
       videoData: {},
       channelCode: "",num:0,flag:null,
       //拾取落点对象
-      location:null
+      location:null,
+      clickTree:null
     };
   },
   mounted() {
@@ -346,12 +349,28 @@ export default {
           "/jilin-devloper/jilin/queryAllAreaCode",
           param,
           {},
-          "get"
+          "post"
       ).then(res=>{
         console.log(res)
       })
     },
-    setValue(){
+    //根据地址去落点
+    keywordPoint(points){
+      console.log(points)
+      function monitorIcon() {
+        return new CTMapOl.style.Style({
+          image: new CTMapOl.style.Icon({
+            src: '../assets/logo.png',
+          }),
+        });
+      }
+      let fixPositionObj = new CTMapOl.extend.FixPosition(this.mapType === "3D" ? this.map : this.map.map,monitorIcon())
+      fixPositionObj.position([124.56485712008785, 41.228574591618738],true)
+      console.log(fixPositionObj)
+    },
+    setValue(val){
+      this.clickTree = val
+      console.log(val)
       const fit = new CTMapOl.extend.FitToRegion(this.mapType === "3D" ? this.map : this.map.map, { duration: 300 },errorMsg => {
         console.log(errorMsg)
       })
@@ -2328,6 +2347,7 @@ html {
     }
   }
   .input-container{
+    position: relative;
     left: -3%;
     top: 2%;
     z-index: -1;
@@ -2369,6 +2389,30 @@ html {
     }
   }
 }
+
+.router-wraps{
+  position: absolute;
+  width: 60%;
+  top: 50px;
+  left: 100px;
+  ::v-deep .el-input .el-input__inner{
+    color: #fff;
+    border-radius: 9px;
+    background-image: linear-gradient(to bottom, #132132,#3361A5) !important;
+    border: 1px solid #B1DEFD;
+  }
+  ::v-deep .el-input-group__append{
+    border: none !important;
+    background-color:none !important;
+    background: none !important;
+  }
+  .el-button{
+    color: #fff;
+    border-radius: 9px;
+    background-image: linear-gradient(to bottom, #132132,#3361A5) !important;
+    border: 1px solid #B1DEFD;
+  }
+}
 .el-select .el-input {
   width: 130px;
 }