From 054e8b629af4a2a3b79c03b82b421fcb68330579 Mon Sep 17 00:00:00 2001
From: SmileXin <13622060635@163.com>
Date: Tue, 11 Feb 2025 00:49:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E8=81=94=E6=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/BaseMap/index.js | 69 +++++++++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 24 deletions(-)

diff --git a/src/pages/BaseMap/index.js b/src/pages/BaseMap/index.js
index 4a0275fb..7650dae9 100644
--- a/src/pages/BaseMap/index.js
+++ b/src/pages/BaseMap/index.js
@@ -84,6 +84,7 @@ class BaseMap extends React.Component {
             deletePointId: '',
             pop: null,
             removeMarker: null,
+            autoComplete: null, // 地图搜索提示
         }
     }
     startLoading = () => {
@@ -110,6 +111,7 @@ class BaseMap extends React.Component {
                 style: 'light',
                 center: [118.405285, 39.904989],
                 zoom: 3,
+                plugin: ['AMap.AutoComplete','AMap.PlaceSearch'],
             })
         });
 
@@ -128,38 +130,55 @@ class BaseMap extends React.Component {
             }
             let can = document.getElementsByClassName('amap-layer')[0];
             can.addEventListener('mousedown', (e) => {
-                console.log('mousedown',can);
+                console.log('mousedown', can);
                 // can.className = 'amap-layer cursor-grab';
-                can.className = can.className.replace("amap-layer","amap-layer cursor-grab");
+                can.className = can.className.replace("amap-layer", "amap-layer cursor-grab");
                 can.addEventListener('mouseup', (e) => {
-                    can.className = can.className.replace("cursor-grab"," ");
+                    can.className = can.className.replace("cursor-grab", " ");
                     // console.log('mouseup',can.className.replace("cursor-grab"," "));
                 });
             })
         });
         // 地图搜索提示功能
-        // scene.on('loaded', () => {
-        //     // AutoComplete 插件
-        //     window.AMap.plugin(['AMap.Autocomplete'], () => {
-        //         // Autocomplete 实例配置
-        //         const autoOptions = {
-        //             city: '全国', //城市，默认全国
-        //             input: 'tipinput' //使用联想输入的input的id
-        //         };
-        //         // 创建Autocomplete对象
-        //         const autoComplete = new AMap.AutoComplete(autoOptions);
-        //     });
+        scene.on('loaded', () => {
 
-        //     // scene.map.plugin(['AMap.Autocomplete'], () => {
-        //     // // Autocomplete 实例配置
-        //     // const autoOptions = {
-        //     //     city: '全国', //城市，默认全国
-        //     //     input: 'tipinput' //使用联想输入的input的id
-        //     // };
-        //     // // 创建Autocomplete对象
-        //     // const autoComplete = new AMap.autoComplete(autoOptions);
-        //     // });
-        // })
+            // AutoComplete 插件
+            window.AMap.plugin(['AMap.AutoComplete','AMap.PlaceSearch'], () => {
+                // Autocomplete 实例配置
+                const autoOptions = {
+                    city: '全国', //城市，默认全国
+                    input: "tipinput", //使用联想输入的input的id
+                };
+                // 创建Autocomplete对象
+                const autoComplete = new AMap.AutoComplete(autoOptions);
+                // 监听输入框的focus事件，否则总是不触发提示
+                document.getElementById('tipinput').addEventListener('focus', (e) => {
+                    autoComplete.search(e.target.value, (status, result) => {
+                        // 搜索成功时，result即是对应的匹配数据
+                        // console.log('result', result);
+                    });
+                });
+                this.state.autoComplete = autoComplete;
+                // 监听选中事件，将选中的地址信息显示在输入框中
+                autoComplete.on('select', (e) => {
+                    console.log('select', e);    
+                    this.setState({
+                        inputContent: e.poi.name,
+                    })
+                })
+
+            });
+
+            // scene.map.plugin(['AMap.Autocomplete'], () => {
+            // // Autocomplete 实例配置
+            // const autoOptions = {
+            //     city: '全国', //城市，默认全国
+            //     input: 'tipinput' //使用联想输入的input的id
+            // };
+            // // 创建Autocomplete对象
+            // const autoComplete = new AMap.autoComplete(autoOptions);
+            // });
+        })
     }
 
     //设置地图省份级别位置
@@ -625,6 +644,7 @@ class BaseMap extends React.Component {
             return false
         }
         return getDistrictByCityApi({ cityAdcode: cityAdcode }).then((e) => {
+            console.log("cityadcode", e.data)
             let districtData = e.data;
             let districtList = [];
             for (var i in districtData) {
@@ -1090,6 +1110,7 @@ class BaseMap extends React.Component {
                                     placeholder={this.state.inputExplainValue}
                                     value={this.state.inputContent}
                                     onChange={(e) => {
+                                        // console.log("input", e.target.value)
                                         this.setState({
                                             inputContent: e.target.value
                                         })