对接高德地图

src/pages/setting/contact.vue

 <template>
   <app-card>
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" :hide-required-asterisk="true">
       <el-form-item label="客户电话" prop="shop_tel">
         <el-radio-group v-model="telRadio" @change="radioChange">
           <el-radio :label="1">普通座机号</el-radio>
@@ -14,18 +14,20 @@
       </el-form-item>
       <el-form-item label="详细地址" prop="shop_address">
         <el-input v-model="ruleForm.shop_address">
-          <!-- <template #append>
+          <template #append>
             <el-button @click="mapSearch">搜索地图</el-button>
-          </template> -->
+          </template>
         </el-input>
       </el-form-item>
-      <!-- <div class="map">
+      <div class="map">
         <div id="map-container"></div>
         <div id="map-panel"></div>
-      </div> -->
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">保存</el-button>
-      </el-form-item>
+      </div>
+      <div class="form-footer">
+        <div class="inner">
+          <el-button type="primary" @click="onSubmit">保存</el-button>
+        </div>
+      </div>
     </el-form>
   </app-card>
 </template>
@@ -79,6 +81,7 @@ export default {
         } else {
           this.telRadio = 2
         }
+        this.$nextTick(this.initMap)
       }
     }
   },
@@ -102,11 +105,24 @@ export default {
       })
     },
     initMap() {
+      if (this.map) {
+        return
+      }
+      const position = JSON.parse(this.ruleForm.shop_pos)
       this.map = new window.AMap.Map('map-container', {
         resizeEnable: true,
-        zoom: 18,
-        center: [116.24582, 40.222615]
+        zoom: 16,
+        center: position
+      })
+
+      new window.AMap.Marker({ map: this.map, position })
+
+      const infoWindow = new window.AMap.InfoWindow({
+        content: this.ruleForm.shop_address,
+        offset: new window.AMap.Pixel(0, -30)
       })
+      infoWindow.open(this.map, position)
+
       window.AMap.plugin(['AMap.PlaceSearch'], () => {
         // 构造地点查询类
         this.placeSearch = new window.AMap.PlaceSearch({
@@ -119,7 +135,7 @@ export default {
         this.placeSearch.on('selectChanged', e => {
           const data = e.selected.data
           this.ruleForm.shop_address = data.cityname + data.adname + data.name
-          this.ruleForm.shop_pos = JSON.stringify(data.location.pos)
+          this.ruleForm.shop_pos = JSON.stringify([data.location.lng, data.location.lat])
           console.log(data)
         })
       })
@@ -129,11 +145,9 @@ export default {
       this.placeSearch.search(this.ruleForm.shop_address)
     }
   },
-  mounted() {
-    // this.initMap()
-  },
   destroyed() {
     this.map && this.map.destroy()
+    this.map = null
   }
 }
 </script>
@@ -158,4 +172,17 @@ export default {
   right: 10px;
   width: 280px;
 }
+.form-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 118;
+  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
+  background-color: rgba(255, 255, 255, 0.95);
+  .inner {
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
 </style>