screen-demo/src/views/templateInstance.vue

@@ -69,11 +69,11 @@
           filterable
       ></el-cascader>
       <div class="input-container">
-        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-          <el-button slot="append" icon="el-icon-search" @click="setValue"></el-button>
+        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" @focus="open=true">
+          <el-button slot="append" icon="el-icon-search" @click="setValue" ></el-button>
         </el-input>
       </div>
-      <div  class="router-wraps" style="top: calc(100% + 2px); margin-top: 4px; left: 117px;">
+      <div  class="router-wraps" v-if="open" style="top: calc(100% + 2px); margin-top: 4px; left: 117px;">
         <div style="width: 90%"><!---->
           <el-input placeholder="请输入起点" v-model="start">
           </el-input><el-input placeholder="请输入终点" v-model="end">
@@ -96,6 +96,7 @@
           </el-dropdown-menu>
         </el-dropdown>
         <el-button  icon="el-icon-search" @click="loadFind"></el-button>
+        <el-button  icon="el-icon-close" @click="open=false"></el-button>
       </div>
     </div>
     <div class="table-container3">
@@ -208,7 +209,7 @@ export default {
   },
   data() {
     return {
-      dropdownVisible: false,
+      open: false,
       input3:'',
       start:'',
       end:'',
@@ -336,23 +337,40 @@ export default {
 
     },
     setValue(){
-      if (this.start){
-        this.end = this.input3
-      }else {
-        this.start = this.input3
-      }
+      // if (this.start){
+      //   this.end = this.input3
+      // }else {
+      //   this.start = this.input3
+      // }
     },
     loadFind(){
-      let start = [125,43]
-      let end = [125.8,43.8]
       let option = {
         width: '8',
         color: '#f40'
       };
-      let toolRoute = new CTMapOl.extend.ToolRoute(this.map.map, option);
-      toolRoute.route(start, end).then(data => {
-        toolRoute.drawPath(data.routs)
+      const location = new CTMapOl.extend.ToolLocation(this.map.map, {
+        onPick: coords => {
+          console.log('coords',coords)
+          if (this.start){
+            this.end = [coords[0],coords[1]]
+          }else {
+            this.start = [coords[0],coords[1]]
+          }
+        }
       })
+      location._draw.overlay_.setStyle(null) //
+      location.pick() //
+      const onClickMap = this.map.on('click', evt => {
+        console.log(evt.coordinate)
+      })
+      CTMapOl.Observable.unByKey(onClickMap)
+
+      if (this.start.length===2 && this.end.length===2) {
+        let toolRoute = new CTMapOl.extend.ToolRoute(this.map.map, option);
+        toolRoute.route(this.start, this.end).then(data => {
+          toolRoute.drawPath(data.routs)
+        })
+      }
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);