feat: ✨ 管理端使用最新地址选择器，默认在config关闭高德地图功能，开启后可继续使用

manager/src/components/map/index.vue

@@ -1,31 +1,23 @@
 <template>
   <div class="map">
-    <Modal v-model="showMap" title="选择地址" width="800">
-      <div class="address">{{ addrContent.address }}</div>
-      <div id="map-container"></div>
 
-      <div class="search-con">
-        <Input
-          placeholder="输入关键字搜索"
-          id="input-map"
-          v-model="mapSearch"
-        />
-        <ul>
-          <li
-            v-for="(tip, index) in tips"
-            :key="index"
-            @click="selectAddr(tip.location)"
-          >
-            <p>{{ tip.name }}</p>
-            <p>{{ tip.district + tip.address }}</p>
-          </li>
-        </ul>
-      </div>
-      <div slot="footer">
-        <Button type="default" @click="showMap = false">取消</Button>
-        <Button type="primary" :loading="loading" @click="ok">确定</Button>
-      </div>
-    </Modal>
+    <div class="address">{{ addrContent.address }}</div>
+    <div id="map-container"></div>
+
+    <div class="search-con">
+      <Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
+      <ul>
+        <li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
+          <p>{{ tip.name }}</p>
+          <p>{{ tip.district + tip.address }}</p>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer" class="footer">
+
+      <Button type="primary" :loading="loading" @click="ok">确定</Button>
+    </div>
+
   </div>
 </template>
 <script>
@@ -34,10 +26,11 @@ import { getRegion } from "@/api/common.js";
 
 const config = require('@/config/index')
 export default {
+  name: "map",
   data() {
     return {
       config,
-      showMap: false, // modal显隐
+      showMap: false, // 地图显隐
       mapSearch: "", // 地图搜索
       map: null, // 初始化地图
       autoComplete: null, // 初始化搜索方法
@@ -55,23 +48,26 @@ export default {
   },
   methods: {
     ok() {
-      // 确定选择
-      this.loading = true;
-      const params = {
-        cityCode: this.addrContent.regeocode.addressComponent.citycode,
-        townName: this.addrContent.regeocode.addressComponent.township,
-      };
-      getRegion(params).then((res) => {
-        if (res.success) {
-          this.addrContent.addr = res.result.name.replace(/,/g, " ");
-          this.addrContent.addrId = res.result.id;
-          this.loading = false;
-          this.showMap = false;
-          this.$emit("getAddress", this.addrContent);
-        }
-      });
+
+      if (this.addrContent && this.addrContent.regeocode) {
+        const params = {
+          cityCode: this.addrContent.regeocode.addressComponent.citycode,
+          townName: this.addrContent.regeocode.addressComponent.township,
+        };
+        getRegion(params).then((res) => {
+          if (res.success) {
+            this.addrContent.addr = res.result.name.replace(/,/g, " ");
+            this.addrContent.addrId = res.result.id;
+            this.loading = false;
+
+            this.$emit("getAddress", this.addrContent);
+          }
+        });
+      } else {
+        this.$Message.error('未获取到坐标信息！请查看高德API配置是否正确')
+      }
+
     },
-    // 初始化地图组件
     init() {
       AMapLoader.load({
         key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -88,7 +84,8 @@ export default {
           version: "1.1", // AMapUI 缺省 1.1
           plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
         },
-      }).then((AMap) => {
+      })
+        .then((AMap) => {
           let that = this;
           this.map = new AMap.Map("map-container", {
             zoom: 12,
@@ -120,7 +117,8 @@ export default {
           that.positionPicker.on("success", function (positionResult) {
             that.addrContent = positionResult;
           });
-        }).catch((e) => {});
+        })
+        .catch((e) => { });
     },
     searchOfMap(val) {
       // 地图搜索
@@ -160,16 +158,20 @@ export default {
   right: 20px;
   top: 64px;
   width: 260px;
+
   ul {
     width: 260px;
-    height: 400px;
+    height: 360px;
     overflow: scroll;
+
     li {
       padding: 5px;
+
       p:nth-child(2) {
         color: #999;
         font-size: 12px;
       }
+
       &:hover {
         background-color: #eee;
         cursor: pointer;
@@ -183,4 +185,9 @@ export default {
   // color: $theme_color;
   font-weight: bold;
 }
+
+.footer {
+  text-align: right;
+  margin: 10px 0;
+}
 </style>