add:map

public/index.html

@@ -24,6 +24,8 @@
     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
       Please enable it to continue.</strong>
   </noscript>
+  <script src="http://webapi.amap.com/maps?v=1.3&key=bb057625545d8cf77df1379e7aaae0b5"></script>
+  <script src="http://webapi.amap.com/ui/1.0/main.js"></script>
   <div id="app"></div>
 </body>
 

src/pages/Groupmeal/headManagement/index.vue

@@ -83,9 +83,12 @@
           placeholder="请输入自提点名称"
         ></el-input>
       </el-form-item>
+       <div id="js-container" class="myMap">
+        正在加载数据 ...
+      </div>
       <el-form-item label="自提点地址">
         <el-input
-          v-model="pointObj.phone"
+          v-model="pointObj.location"
           placeholder="请输入自提点地址"
         ></el-input>
       </el-form-item>
@@ -108,7 +111,6 @@
           ref="picUpload"
           limit="1"
           list-type="picture-card"
-          multiple
         >
           <template #default>
             <i class="el-icon-plus"></i>
@@ -196,13 +198,12 @@ export default {
       showAddPointDialog: false,
       fileList: [],
       uploadUrl: `${GOODS_URI}/ksy/ks3apiunencrypt/ks3api_upload`, // 金山云上传地址
-  
+      pickStation: {}
     }
   },
   async created () {
     await this.getColoneList()
     await this.getColoneApplyList();
-    this.fileList[0] = pointObj.take_place_pic
   },
   methods: {
     handleDetailSuccess(res) {
@@ -221,7 +222,10 @@ export default {
       let res =  await colonelApplyPoint({colonel_apply_id: id});
       if (res.code !== 0) return this.$message.error(res.reason);
       this.pointObj = res.result;
-      this.showAddPointDialog = true
+      this.pickStation = `${this.pointObj.province}-${this.pointObj.city}-${this.pointObj.area}`
+      this.initMap();
+      this.pointObj.take_place_pic && (this.fileList[0] = this.pointObj.take_place_pic)
+      this.showAddPointDialog = true;
     },
     async handleApply(id, status) {
       let res = await colonelAudit({colonel_apply_id: id, audit_status: status})
@@ -245,6 +249,109 @@ export default {
         console.error(error);
       }
     },
+    getMapInfo(mapInfo) {
+      this.form.location = mapInfo.address;
+      this.form.province = mapInfo.province;
+      this.form.city = mapInfo.city;
+      this.form.area = mapInfo.area;
+      this.form.longitude = mapInfo.lng; // longitude latitude contactor
+      this.form.latitude = mapInfo.lat;
+    },
+    dragMap(data) {
+      console.log(data)
+      this.pointObj.location = data.address;
+      this.pointObj.longitude = data.position.lng;
+      this.pointObj.latitude = data.position.lat;
+      this.pointObj.province = data.regeocode.addressComponent.province;
+      this.pointObj.city = data.regeocode.addressComponent.city;
+      this.pointObj.province = data.regeocode.addressComponent.district;
+    },
+    initMap() {
+      // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
+      let AMapUI = (this.AMapUI = window.AMapUI);
+      let AMap = (this.AMap = window.AMap);
+
+      AMapUI.loadUI(["misc/PositionPicker"], PositionPicker => {
+        let mapConfig = {
+          zoom: 16
+          // cityName: this.MapCityName
+        };
+        if (this.lat && this.lng) {
+          mapConfig.center = [this.lng, this.lat];
+        }
+        let map = new AMap.Map("js-container", mapConfig);
+
+        // 加载地图搜索插件
+        AMap.service("AMap.PlaceSearch", () => {
+          this.placeSearch = new AMap.PlaceSearch({
+            pageSize: 5,
+            pageIndex: 1,
+            citylimit: true,
+            // city: this.MapCityName,
+            map: map,
+            panel: "js-result"
+          });
+        });
+
+        // 启用工具条
+        AMap.plugin(["AMap.ToolBar"], function() {
+          map.addControl(
+            new AMap.ToolBar({
+              position: "RB"
+            })
+          );
+        });
+
+        // 地图地图定位
+        AMap.plugin("AMap.Geolocation", function() {
+          var geolocation = new AMap.Geolocation({
+            // 是否使用高精度定位，默认：true
+            enableHighAccuracy: true,
+            // 设置定位超时时间，默认：无穷大
+            timeout: 10000,
+            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
+            buttonOffset: new AMap.Pixel(10, 20),
+            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+            zoomToAccuracy: true,
+            //  定位按钮的排放位置,  RB表示右下
+            buttonPosition: "RB"
+          });
+          map.addControl(geolocation);
+          geolocation.getCurrentPosition();
+          AMap.event.addListener(geolocation, "complete", onComplete);
+          AMap.event.addListener(geolocation, "error", onError);
+
+          function onComplete(data) {
+            console.log(data);
+            // data是具体的定位信息
+          }
+
+          function onError(data) {
+            console.log(data);
+            // 定位出错
+          }
+        });
+
+        // 创建地图拖拽
+        let positionPicker = new PositionPicker({
+          mode: "dragMap", // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
+          map: map, // 依赖地图对象
+          iconStyle: {
+            //自定义外观
+            url: "//webapi.amap.com/ui/1.0/assets/position-picker2.png", //图片地址
+            size: [50, 50], //要显示的点大小，将缩放图片
+            ancher: [24, 40] //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
+          }
+        });
+
+        // 拖拽完成发送自定义 drag 事件
+        positionPicker.on("success", positionResult => {
+          this.dragMap(positionResult);
+        });
+        // 启动拖放
+        positionPicker.start();
+      });
+    }
   }
 }
 </script>
@@ -257,5 +364,8 @@ export default {
     padding: 10px;
   }
 }
-
+.myMap {
+  width: 100%;
+  height: 200px;
+}
 </style>