搜索联想

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', () => {
+        scene.on('loaded', () => {
-        //     // AutoComplete 插件
+
-        //     window.AMap.plugin(['AMap.Autocomplete'], () => {
+            // 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);
+            // const autoComplete = new AMap.autoComplete(autoOptions);
             // });
-
+        })
-        //     // 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
                                         })