2023.10.31 - 添加经纬度选择

package-lock.json

@@ -15,6 +15,11 @@
         "js-message": "1.0.7"
       }
     },
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "echarts": "^4.9.0",

src/views/business/businessList/components/SelectAddressMap.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-dialog title="选择位置" :visible.sync="selectAddressMapVisible" width="60%" :before-close="() => { }">
+    <div class="map-cpn-container">
+      <div class="search-conrainer" style="display: flex; align-items: center; margin: 0 0 20px 0;">
+        <el-select style="width: 100%;" @change="handleSelectChange" v-model="searchAddress" filterable remote
+          reserve-keyword placeholder="请输入您的位置" :remote-method="handleSearchNearbyAddress" :loading="isLoading">
+          <el-option v-for="(item, index) in addressList" :key="index" :label="item.name" :value="item.name + item.tel">
+          </el-option>
+        </el-select>
+      </div>
+      <div v-if="currentSelectLngLat.length">当前选中的位置：<el-tag>{{ currentSelectLngLat[0] }} </el-tag> - <el-tag>{{
+        currentSelectLngLat[1] }}</el-tag></div>
+      <el-divider></el-divider>
+      <div id="map-container"></div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="selectAddressMapVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { MessageBox } from 'element-ui'
+
+export default {
+  data() {
+    return {
+      selectAddressMapVisible: false,
+      map: null,
+      prevPoint: null,
+      searchAddress: "",
+      currentAddressPoint: [113.08272, 22.87655],
+      isLoading: false,
+      addressList: [],
+      currentSelectLngLat: []
+    }
+  },
+
+  methods: {
+    show() {
+      this.selectAddressMapVisible = true
+      !this.map && this.initMap()
+    },
+
+    initMap() {
+      window._AMapSecurityConfig = {
+        securityJsCode: 'ad9587997f413d1089653ea4560a91d0'
+      }
+
+      AMapLoader.load({
+        key: "3b84da70f85b1024deb934d8835b03ad",
+        version: "2.0",
+        plugins: ['AMap.HawkEye', 'AMap.AutoComplete', 'AMap.Marker', 'AMap.PlaceSearch'],
+      }).then((AMap) => {
+        this.map = new AMap.Map("map-container", {
+          zoom: 16,
+          center: this.currentAddressPoint,
+        });
+
+        this.map.on('click', this.getClickAddress)
+
+      }).catch(e => {
+        console.log(e);
+      })
+    },
+
+    setSelectPoint() {
+
+    },
+
+    getClickAddress(e) {
+      const { lnglat } = e
+      const { lat, lng } = lnglat
+      this.searchAddress = ''
+      this.prevPoint && this.map.remove(this.prevPoint)
+      this.currentAddressPoint = [lng, lat]
+      this.currentSelectLngLat = [lng, lat]
+      this.map.setZoomAndCenter(18, [lng, lat])
+      this.prevPoint = new AMap.Marker({
+        position: this.currentAddressPoint,
+      });
+      this.prevPoint.setMap(this.map);
+    },
+
+    /**
+     * 搜索地址
+     */
+    handleSearchNearbyAddress(queryString) {
+      if (queryString) {
+        const _this = this
+        this.isLoading = true
+        let placeSearch = new AMap.PlaceSearch({
+          pageSize: 50,
+          pageIndex: 1,
+          extensions: 'all',
+        })
+        placeSearch.searchNearBy(queryString, this.currentAddressPoint, 50000, function (status, result) {
+          if (result && typeof result === 'object' && result.info === 'OK') {
+            _this.addressList = result.poiList.pois
+          }
+          _this.isLoading = false
+        })
+      }
+    },
+
+    handleSelectChange(e) {
+      const detailInfo = this.addressList.find(item => {
+        return item.name + item.tel === e
+      })
+
+      if (detailInfo) {
+        const location = detailInfo.location
+        this.currentSelectLngLat = [location.lng, location.lat]
+        this.map.setZoomAndCenter(18, this.currentSelectLngLat)
+        this.prevPoint = new AMap.Marker({
+          position: this.currentSelectLngLat,
+        });
+        this.prevPoint.setMap(this.map);
+      }
+    },
+
+    // 点击确定
+    handleSubmit() {
+      if (!this.currentSelectLngLat.length) {
+        MessageBox.confirm('您还没选择门店经纬度，确认关闭？', '提示').then(res => {
+          this.selectAddressMapVisible = false
+        }).catch(() => {
+          console.log("取消了");
+        })
+      } else {
+        this.$emit('select', this.currentSelectLngLat)
+        this.selectAddressMapVisible = false
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+#map-container {
+  width: 100%;
+  height: 500px;
+}
+</style>

src/views/business/businessList/index.vue

@@ -119,6 +119,17 @@
                     <el-input :value="hidden(ruleForm.shopAdress, 1, 1)" :disabled="disabled" />
                   </div> -->
                 </el-form-item>
+                <el-form-item label="店铺经纬度" prop="longitude">
+                  <div>
+                    <span v-if="ruleForm.longitude">
+                      {{ ruleForm.longitude }} - {{ ruleForm.latitude }}
+                    </span>
+                    <el-button size="mini" type="primary" style="margin-left: 20px;"
+                      @click="$refs.selectAddressMapRef && $refs.selectAddressMapRef.show()">{{ ruleForm.longitude ? '修改'
+                        :
+                        '选择' }}</el-button>
+                  </div>
+                </el-form-item>
                 <el-form-item label="生效日期" prop="effectiveDate">
                   <el-date-picker v-model="ruleForm.effectiveDate" :disabled="disabled" value-format="yyyy-MM-dd"
                     type="date" placeholder="选择日期" />
@@ -255,6 +266,9 @@
         </span>
       </el-dialog>
     </div>
+
+    <!-- 选择经纬度 -->
+    <SelectAddressMap ref="selectAddressMapRef" @select="handleSelectLngAndLat"></SelectAddressMap>
   </div>
 </template>
 
@@ -272,11 +286,12 @@ import {
 import { uploadUrl } from '@/utils/request'
 import { getProvinceList, getChildAreaList } from '@/api/address'
 import { businessClassList } from '@/api/business'
+import SelectAddressMap from './components/SelectAddressMap'
 
 export default {
   // eslint-disable-next-line vue/match-component-file-name
   name: 'BusinessList',
-  components: {},
+  components: { SelectAddressMap },
   data() {
     // 这里存放数据
     return {
@@ -437,6 +452,13 @@ export default {
             message: "请选择地址",
             trigger: 'blur'
           }
+        ],
+        longitude: [
+          {
+            required: true,
+            message: "请选择商家经纬度",
+            trigger: 'blur'
+          }
         ]
       },
       rules: {
@@ -539,6 +561,7 @@ export default {
         latitude: '', // 经纬度
       }
       this.dialogVisible = true
+      this.advertisementList = []
     },
     next() {
       this.activeName = 'second'
@@ -782,8 +805,6 @@ export default {
       const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
       const nodeData = checkedNode[0].data
       this.ruleForm.areaId = nodeData.id
-      this.ruleForm.longitude = nodeData.longitude
-      this.ruleForm.latitude = nodeData.latitude
     },
 
     // 获取所有商家分类
@@ -822,6 +843,12 @@ export default {
         this.ruleForm.classificationId = currentClassInfo.levelId.slice(1).split('/').map(item => item * 1)
       }
     },
+
+    // 选择经纬
+    handleSelectLngAndLat(address) {
+      this.ruleForm.longitude = address[0]
+      this.ruleForm.latitude = address[1]
+    }
   }
 }
 </script>