工程地址地图搜索功能增加

sgzb-ui/src/views/base/section/index.vue

@@ -21,10 +21,10 @@
 
             <el-form-item>
                 <el-button
-                    type="primary"
-                    icon="el-icon-search"
                     size="mini"
+                    type="primary"
                     @click="handleQuery"
+                    icon="el-icon-search"
                     >搜索</el-button
                 >
                 <el-button
@@ -189,6 +189,20 @@
                 v-if="innerVisible"
                 append-to-body
             >
+                <el-row class="search-container">
+                    <el-input
+                        clearable
+                        placeholder="请输入地址"
+                        v-model="searchAddress"
+                        @keyup.enter.native="onSearchAddress"
+                    />
+                    <el-button
+                        type="primary"
+                        style="width: 120px"
+                        @click="onSearchAddress"
+                        >搜索</el-button
+                    >
+                </el-row>
                 <div
                     id="map-container"
                     style="height: 550px; background-color: #bfc"
@@ -462,6 +476,7 @@ export default {
             },
             innerVisible: false,
             map: null,
+            searchAddress: '',
         }
     },
     created() {
@@ -684,6 +699,65 @@ export default {
                 })
             })
         },
+
+        /* 搜索 */
+        onSearchAddress() {
+            // console.log(this.searchAddress, '-----------')
+
+            // 创建地址
+            const myGeo = new BMapGL.Geocoder()
+            const _this = this
+            myGeo.getPoint(
+                this.searchAddress,
+                function (point) {
+                    if (point) {
+                        _this.map.clearOverlays()
+                        const { lng, lat } = point
+
+                        _this.map.centerAndZoom(point, 16)
+                        _this.map.addOverlay(
+                            new BMapGL.Marker(point, {
+                                title: _this.searchAddress,
+                            }),
+                        )
+                        // 根据坐标得到地址描述
+                        myGeo.getLocation(
+                            new BMapGL.Point(lng, lat),
+                            function (result) {
+                                if (result) {
+                                    // console.log('result-----', result)
+                                    let addComp = result.addressComponents
+                                    // let addressDetails = result.content
+                                    _this.form.detailsAddress = `${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`
+                                    // _this.form.detailsAddress = `${addressDetails.address.replace(
+                                    //     addComp.province,
+                                    //     '',
+                                    // )}${addressDetails.business}${
+                                    //     addressDetails.poi_desc
+                                    // }`
+                                    _this.form.province = `${addComp.province}`
+                                    _this.form.longitude = lng
+                                    _this.form.latitude = lat
+                                }
+                            },
+                        )
+                    } else {
+                        this.$message.error('您输入的地址有误，请重新输入')
+                    }
+                },
+                '中国',
+            )
+        },
+    },
+    watch: {
+        innerVisible: {
+            handler(newValue) {
+                if (!newValue) {
+                    this.searchAddress = ''
+                }
+            },
+            deep: true,
+        },
     },
 }
 </script>
@@ -692,4 +766,16 @@ export default {
     display: flex;
     align-items: center;
 }
+
+.search-container {
+    display: flex;
+    margin-bottom: 2px;
+
+    ::v-deep .el-input__inner {
+        border-radius: 0;
+    }
+    .el-button {
+        border-radius: 0;
+    }
+}
 </style>