新增地图选点

src/components/Map/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <van-action-sheet v-model="show" title="选择发生地点">
+    <div class="content">
+      <iframe
+        id="mapPage"
+        frameborder="0"
+        height="100%"
+        :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${mapKey}&referer=myapp`"
+        width="100%"
+      ></iframe>
+    </div>
+  </van-action-sheet>
+</template>
+
+<script>
+var loc
+import { mapKey } from "@/config"
+export default {
+  name: 'index',
+  data() {
+    return {
+      show: false,
+      mapKey: mapKey
+    }
+  },
+  mounted() {
+    window.addEventListener(
+      'message',
+      event => {
+        loc = event.data
+        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
+        if (loc && loc.module == 'locationPicker') {
+          //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
+          console.log('location', loc)
+          this.show = false
+          this.$emit('locationChange', loc)
+        }
+      },
+      false
+    )
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  height: 80vh;
+}
+</style>

src/config/env.development.js

@@ -9,5 +9,6 @@ module.exports = {
   baseUrl: 'http://192.168.1.144/api', // 项目地址
   baseApi: '/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
   wxId: 'wx1078fa1e99424de9',
-  secret: 'ebecf6b88ab455f1cdf4a5b6357407b8'
+  secret: 'ebecf6b88ab455f1cdf4a5b6357407b8',
+  mapKey: '5D6BZ-KHLW4-JUXU5-XIM47-5Q2DJ-IPBBT'
 }

src/config/env.production.js

@@ -4,8 +4,8 @@
  * @LastEditors: mk 2403457699@qq.com
  * @LastEditTime: 2023-10-13 13:40:38
  * @Description: 介绍一下改动了什么
- * 
- * 
+ *
+ *
  */
 // 本地环境配置
 module.exports = {
@@ -17,5 +17,6 @@ module.exports = {
   baseUrl: 'https://epmet-preview.elinkservice.cn/', // 项目地址
   baseApi: 'https://epmet-preview.elinkservice.cn/api',
   wxId: 'wx1078fa1e99424de9',
-  secret: 'ebecf6b88ab455f1cdf4a5b6357407b8'
+  secret: 'ebecf6b88ab455f1cdf4a5b6357407b8',
+  mapKey: '5D6BZ-KHLW4-JUXU5-XIM47-5Q2DJ-IPBBT'
 }

src/config/env.staging.js

@@ -8,5 +8,6 @@ module.exports = {
   baseUrl: 'https://epmet-preview.elinkservice.cn', // 项目地址
   baseApi: 'https://epmet-preview.elinkservice.cn/api',
   wxId: 'wx1078fa1e99424de9',
-  secret: 'ebecf6b88ab455f1cdf4a5b6357407b8'
+  secret: 'ebecf6b88ab455f1cdf4a5b6357407b8',
+  mapKey: '5D6BZ-KHLW4-JUXU5-XIM47-5Q2DJ-IPBBT'
 }

src/plugins/vant.js

@@ -21,7 +21,8 @@ import {
   Steps,
   Step,
   Divider,
-  List
+  List,
+  ActionSheet
 } from 'vant'
 
 Vue.use(Button)
@@ -45,3 +46,4 @@ Vue.use(Button)
   .use(Step)
   .use(Divider)
   .use(List)
+  .use(ActionSheet)

src/views/event/index.vue

@@ -31,13 +31,14 @@
     </div>
 
     <div class="block">
-      <van-cell title="发生地点" is-link>
+      <van-cell title="发生地点" @click="$refs.map.show = true" is-link>
         <div>{{ address }}</div>
       </van-cell>
     </div>
     <van-button round block @click="submit" color="linear-gradient(to right, #81B5FB, #3E92FF)">提交</van-button>
 
     <Perfect />
+    <Map ref="map" @locationChange="locationChange" />
   </div>
 </template>
 
@@ -46,11 +47,13 @@ import { setConfig } from '@/utils/jweixin'
 import Recording from '@/components/Recording'
 import Perfect from '@/components/Perfect'
 import Audio from '@/components/Audio'
+import Map from '@/components/Map'
 import { uploadvariedfile } from '@/api/basic'
 import { saveOfficialAccountEvent } from '@/api/event'
+import { mapKey } from "@/config"
 export default {
   name: 'event',
-  components: { Recording, Audio, Perfect },
+  components: { Recording, Audio, Perfect, Map },
   data() {
     return {
       form: {},
@@ -78,7 +81,7 @@ export default {
       'translateVoice'
     ])
     // 初始化腾讯地图
-    this.geolocation = new qq.maps.Geolocation('LWBBZ-TIGC3-VFP3L-YNMWH-FJB7T-JFBLO', 'myapp')
+    this.geolocation = new qq.maps.Geolocation(mapKey, 'myapp')
     // 获取定位
     this.getMyLocation()
   },
@@ -94,6 +97,11 @@ export default {
       this.address = position.city + position.addr
       console.log('定位成功', position)
     },
+    locationChange(data) {
+      this.longitude = data.latlng.lng
+      this.latitude = data.latlng.lat
+      this.address = data.poiaddress
+    },
     errorPosition() {
       console.log('定位失败，再次进行定位')
     },