From 8f51d080cabe5692c634e762a2080981be524aec Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Fri, 18 Aug 2023 16:16:06 +0800
Subject: [PATCH] fix:修改高德地图搜索框

---
 src/components/map/pickCoordinate1.vue |  133 ++++++++++++++++++++++++++++++-------------
 1 files changed, 92 insertions(+), 41 deletions(-)

diff --git a/src/components/map/pickCoordinate1.vue b/src/components/map/pickCoordinate1.vue
index 8016aba..2aa6d2d 100644
--- a/src/components/map/pickCoordinate1.vue
+++ b/src/components/map/pickCoordinate1.vue
@@ -12,11 +12,11 @@
       <div style="display: flex">
         <div style="display: flex; width: 300px">
           <div>���������</div>
-            <a-input
+          <!-- <a-input
             placeholder="���������������"
             id="tipinput"
             style="width: 160px; height: 26px"
-          ></a-input>
+          ></a-input> -->
           <!-- <a-input
             v-model="input"
             placeholder="���������������"
@@ -24,6 +24,14 @@
             style="width: 160px; height: 26px"
             @change="searchMap"
           ></a-input> -->
+          <input v-model="input" id="tipinput" /><a-button
+            @click="searchAddress"
+            type="primary"
+            style="margin-left:5px"
+          >
+            ������
+          </a-button>
+          <div id="panel"></div>
           <!-- <a-button
             size="small"
             type="primary"
@@ -61,6 +69,7 @@
         :zoom="zoom"
         :scroll-wheel-zoom="true"
         style="height: 400px; width: 100%; margin-top: 20px"
+        id="amap"
       >
         <el-amap-marker
           :position="clickPoint"
@@ -68,6 +77,7 @@
           :dragging="true"
         ></el-amap-marker>
       </el-amap>
+
       <!--      :scroll-wheel-zoom="true"-->
       <!-- <baidu-map
         :center="center"
@@ -104,6 +114,8 @@
 } from 'vue-property-decorator';
 import any = jasmine.any;
 import { get, post } from "@/util/request";
+import $ from 'jquery'
+import func from 'vue-temp/vue-editor-bridge';
 
 
 @Component({
@@ -146,7 +158,7 @@
     // this.center.lat = newVal.lat
   }
   private created() {
-    console.log(this.clickPoint,'clickPoint');
+    // console.log(this.clickPoint,'clickPoint');
   }
 
   // ���������������
@@ -156,44 +168,73 @@
   //   this.zoom = 19
 
   // }
-  private selectPoi(e){
-    console.log(e);
-    let poi = e
-      if (poi.length > 0) {
-         this.clickPoint = [poi[0].lng, poi[0].lat]
-         }
-  }
+  // private selectPoi(e){
+  //   console.log(e);
+  //   let poi = e
+  //     if (poi.length > 0) {
+  //        this.clickPoint = [poi[0].lng, poi[0].lat]
+  //        }
+  // }
   private input:any=''
   private mark:any=''
-  private searchMap(){
-     var autoOptions = {
-        input: "tipinput"
-    };
-    var auto = new AMap.AutoComplete(autoOptions);
-    const placeSearch = new AMap.PlaceSearch(this.input);
-    console.log(window);
-     auto.on("select", select);//������������������������������������������������
-        function select(e) {
-          console.log(e.poi.adcode);
-            placeSearch.setCity(e.poi.adcode);
-            placeSearch.search(e.poi.name);  //���������������������
+  // private searchMap(){
+  //    var autoOptions = {
+  //       input: "tipinput"
+  //   };
+  //   var self=this
+  //   var auto = new AMap.Autocomplete(autoOptions);
+  //   const placeSearch = new AMap.PlaceSearch(self.input);
+  //   // console.log(window);
+  //    auto.on("select", select);//������������������������������������������������
+  //       function select(e) {
+  //           placeSearch.setCity(e.poi.adcode);
+  //           placeSearch.search(e.poi.name);  //���������������������
+  //           self.clickPoint = [e.poi.location.lng, e.poi.location.lat]
+  //       }
+  // }
+  private searchAddress() {
+           var map = new AMap.Map("amap", {
+                resizeEnable: true
+            });
+         var placeSearch = new AMap.PlaceSearch({ 
+            pageSize: 5, // ������������������������
+            pageIndex: 1, // ������
+            city: "������", // ���������������
+            citylimit: false,  //���������������������������������������������
+            panel: "panel", // ���������������������������������������������
+            map: map, // ���������������������������
+            autoFitView: true // ������������������������������������������ Marker���������������������������������
+        });
+        //���������������
+        placeSearch.search(this.input)
+        var salf=this
+        var markerone=0
+        map.on('click',click);
+        function click(e){
+          if(markerone===1){
+            map.remove(map.Marker)
+          }
+          salf.mapClick(e)
+          map.Marker=new AMap.Marker({
+            map: map,
+            position: salf.clickPoint,
+            animation:"AMAP_ANIMATION_BOUNCE"
+          })
+          markerone=1
         }
-  
-  // ���������������
-  // console.log(this.input);
-  //  placeSearch.search(this.input, (status, result) => {
-  //   // ������������������result������������������POI������
-   
-  //   console.log(result);//���������������������������������������������������������������������������
-  // });
-  // // ������������������������
-  // AMap.event.addListener(placeSearch, "selectChanged", (SelectChangeEvent) => {
-  //   // ������������������������������������������
-  //   this.mark = SelectChangeEvent.selected.data;
-  //   console.log(SelectChangeEvent.selected.data,'������');
-  // }); 
-
-  }
+        // function click(e){
+        //   console.log(e);
+        //   salf.clickPoint=[e.lnglat.lng,e.lnglat.lat]
+        // }
+        // placeSearch.search(this.input,function(status, result){
+        //   console.log(result);
+        //   auto.on('click',click);
+        //     function click(e){
+        //      console.log(e);
+        //     }
+        // });
+        // console.log(this.input);
+    }
   // ���������������������������
   private clickPoint: any = this.lnglat === '' ?  [
           120.720262,
@@ -204,10 +245,10 @@
   ]
 
   private mapClick(e: any) {
+    // console.log(e);
     const { lng, lat } = e.lnglat 
     this.clickPoint=[ lng, lat]
-    this.$forceUpdate()
-    // console.log(this.clickPoint);
+    console.log(this.clickPoint);
   }
 
   private handleMapCancel() {
@@ -268,9 +309,19 @@
 }
 .amap-sug-result {
   position: absolute;
-  z-index: 9999 !important;;
+  z-index: 9999 !important;
   background-color: #fefefe;
   border: 1px solid #d1d1d1;
   bottom: auto;
 }
+#panel {
+  z-index: 999;
+  position: absolute;
+  background-color: white;
+  max-height: 100%;
+  overflow-y: auto;
+  left: 25px;
+  width: 280px;
+  top: 126px;
+}
 </style>

--
Gitblit v1.8.0