From 31f5d5f50e575b6521550920037a1a937520e659 Mon Sep 17 00:00:00 2001
From: Aug <17674666882@163.com>
Date: Mon, 28 Oct 2024 17:43:19 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E6=B5=8B=E8=AF=95=E7=BB=8F=E7=BA=AC?=
 =?UTF-8?q?=E5=BA=A6=E8=8E=B7=E5=8F=96=E4=B8=89-=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E8=8E=B7=E5=8F=96=E7=BB=8F=E7=BA=AC=E5=BA=A6?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin-hanhai-vue/package.json                      |   1 +
 admin-hanhai-vue/src/main.js                       |   3 +
 .../views/mytestUtils/modules/MytestUtilsForm.vue  |  20 ++
 .../views/mytestUtils/modules/TencentMapPicker.vue | 235 +++++++++++++++++++++
 4 files changed, 259 insertions(+)
 create mode 100644 admin-hanhai-vue/src/views/mytestUtils/modules/TencentMapPicker.vue

diff --git a/admin-hanhai-vue/package.json b/admin-hanhai-vue/package.json
index c8a446b..77e4060 100644
--- a/admin-hanhai-vue/package.json
+++ b/admin-hanhai-vue/package.json
@@ -35,6 +35,7 @@
     "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
+    "vue-jsonp": "^2.0.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
     "vue-photo-preview": "^1.1.3",
diff --git a/admin-hanhai-vue/src/main.js b/admin-hanhai-vue/src/main.js
index 0809df2..6494dee 100644
--- a/admin-hanhai-vue/src/main.js
+++ b/admin-hanhai-vue/src/main.js
@@ -8,6 +8,9 @@ import router from './router'
 import store from './store/'
 import { VueAxios } from "@/utils/request"
 
+import { VueJsonp } from 'vue-jsonp'
+Vue.use(VueJsonp)
+
 require('@jeecg/antd-online-mini')
 require('@jeecg/antd-online-mini/dist/OnlineForm.css')
 
diff --git a/admin-hanhai-vue/src/views/mytestUtils/modules/MytestUtilsForm.vue b/admin-hanhai-vue/src/views/mytestUtils/modules/MytestUtilsForm.vue
index 30db8e6..0ce10df 100644
--- a/admin-hanhai-vue/src/views/mytestUtils/modules/MytestUtilsForm.vue
+++ b/admin-hanhai-vue/src/views/mytestUtils/modules/MytestUtilsForm.vue
@@ -13,6 +13,15 @@
               <a-input-number v-model="model.latitude" placeholder="请输入纬度" style="width: 100%" />
             </a-form-model-item>
           </a-col>
+            <a-col :span="24">
+              <a-form-model-item label="地图选择位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <TencentMapPicker
+                  :latitude="model.latitude"
+                  :longitude="model.longitude"
+                  @onLocationSelected="handleLocationSelected"
+                />
+              </a-form-model-item>
+            </a-col>
         </a-row>
       </a-form-model>
     </j-form-container>
@@ -23,10 +32,12 @@
 
   import { httpAction, getAction } from '@/api/manage'
   import { validateDuplicateValue } from '@/utils/util'
+  import TencentMapPicker from './TencentMapPicker.vue';
 
   export default {
     name: 'MytestUtilsForm',
     components: {
+      TencentMapPicker
     },
     props: {
       //表单禁用
@@ -39,6 +50,8 @@
     data () {
       return {
         model:{
+          longitude:null,
+          latitude:null,
          },
         labelCol: {
           xs: { span: 24 },
@@ -68,6 +81,13 @@
       this.modelDefault = JSON.parse(JSON.stringify(this.model));
     },
     methods: {
+
+      handleLocationSelected({latitude, longitude}) {
+        console.log('event',latitude, longitude)
+        this.model.latitude = latitude;
+        this.model.longitude = longitude;
+      },
+
       add () {
         this.edit(this.modelDefault);
       },
diff --git a/admin-hanhai-vue/src/views/mytestUtils/modules/TencentMapPicker.vue b/admin-hanhai-vue/src/views/mytestUtils/modules/TencentMapPicker.vue
new file mode 100644
index 0000000..a3a0674
--- /dev/null
+++ b/admin-hanhai-vue/src/views/mytestUtils/modules/TencentMapPicker.vue
@@ -0,0 +1,235 @@
+<template>
+  <div>
+      <div class="map-box">
+          <div class="map" ref="map" style="height: 400px" ></div>
+          <div class="map-search">
+              <div>
+                  <a-input-search id="place" v-model="searchValue" placeholder="请输入详细地址" enter-button @search="searchAddress(searchValue)" />
+              </div>
+              <div>
+                  <ul v-if="kwData.length">
+                      <li v-for="(item, index) in kwData" :key="index" @click="selectKeyword(item)">{{ item.address }}</li>
+                  </ul>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TencentMapPicker',
+  props: {
+      latitude: {
+          type: Number|String,
+          default: 0
+      },
+      longitude: {
+          type: Number|String,
+          default: 0
+      }
+  },
+  watch: {
+      latitude(newVal, oldVal) {
+          console.info(`newVal`,newVal,`oldVal`,oldVal)
+          if (newVal) {
+              this.form.latitude = newVal
+              // this.$nextTick(()=>{
+              //     this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
+              // })
+          }
+      },
+      longitude(newVal, oldVal) {
+          console.info(`newVal`,newVal,`oldVal`,oldVal)
+          if (newVal) {
+              this.form.longitude = newVal
+              // this.$nextTick(()=>{
+              //     this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
+              // })
+          }
+      }
+  },
+  data() {
+      return {
+          searchValue: '', //地图搜索
+          form: {
+              longitude: 116.397128,
+              latitude: 39.916527
+          },
+          kwData:[]
+      }
+  },
+  mounted() {
+      let that = this
+      if (that.script) return;
+      that.script = document.createElement('script');
+      that.script.type = 'text/javascript';
+      that.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=SNGBZ-K6AKJ-5X2FI-XYKCM-DEZXZ-FGBA3`;
+      document.head.appendChild(that.script);
+      that.script.onload = () => {
+          window.initMap = that.initMap;
+          that.$nextTick(() => {
+              that.initMap();
+          });
+      };
+  },
+  methods: {
+      // 地图
+      initMap() {
+          // 搜索类
+          this.searchEr = new window.TMap.service.Search({ pageSize: 15 });
+          // 地图主类
+          this.map = new window.TMap.Map(this.$refs.map, {
+              backgroundColor: '#f7f7f7',
+              mapStyleId: 'style1',
+              zoom: 14,
+              mapTypeControlOptions: {
+                  mapTypeIds: [],
+              },
+              draggableCursor: 'crosshair',
+              center: new window.TMap.LatLng(this.form.latitude, this.form.longitude),
+          });
+          // 图层类
+          this.markerLayer = new window.TMap.MultiMarker({
+              map: this.map,
+              geometries: [],
+          });
+          // 地址逆解析
+          this.geocoder = new window.TMap.service.Geocoder();
+          const setMarker = () => {
+              const latlng = new window.TMap.LatLng(this.form.latitude, this.form.longitude);
+              this.markerLayer.setGeometries([]);
+              let geometries = this.markerLayer.getGeometries();
+              geometries.push({
+                  id: '-1',
+                  position: latlng,
+              });
+              this.markerLayer.updateGeometries(geometries);
+          };
+          this.map.on('click', (e) => {
+              this.form.longitude = e.latLng.getLng(); // 经度
+              this.form.latitude = e.latLng.getLat(); // 纬度
+
+              setMarker();
+              this.getAddressFormat();
+          });
+          if (this.form.longitude) {
+              this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
+              setMarker();
+          }
+      },
+      selectKeyword(event){
+          this.map.setCenter(new window.TMap.LatLng(event.location.lat, event.location.lng));
+          this.kwData = []
+      },
+      // 地图搜索
+      searchAddress(keyword = '') {
+          if (!keyword) return;
+          this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', {
+              key: 'SNGBZ-K6AKJ-5X2FI-XYKCM-DEZXZ-FGBA3',
+              output: 'jsonp',
+              keyword: keyword,
+          }).then((res) => {
+              console.log(`res`,res)
+              if (res.status === 0) {
+                  this.kwData = res.data
+              } else {
+                  this.kwData = []
+              }
+          }).catch((e) => {
+              console.log(e)
+          })
+          this.markerLayer.setGeometries([]);
+          this.searchEr.searchRectangle({
+                  keyword,
+                  bounds: this.map.getBounds(),
+              })
+              .then((result) => {
+                  console.info(`result`,result)
+                  const { location = {} } = result.data[0] || {};
+                  const { lat = 39.916527, lng = 116.397128 } = location;
+                  this.map.setCenter(new window.TMap.LatLng(lat, lng));
+                  result.data.forEach((item, index) => {
+                      let geometries = this.markerLayer.getGeometries();
+                      // 点标注数据数组
+                      geometries.push({
+                          id: String(index),
+                          position: item.location,
+                      });
+                      // 绘制地点标注
+                      this.markerLayer.updateGeometries(geometries);
+                  });
+              });
+      },
+      getAddressFormat() {
+          const { longitude, latitude } = this.form;
+          this.geocoder
+              .getAddress({
+                  location: new window.TMap.LatLng(latitude, longitude),
+              })
+              .then((res) => {
+                  const {
+                      formatted_addresses: { recommend = '' },
+                  } = res.result || {};
+                  this.searchValue = recommend
+                  this.form.hotelDetailAddress = recommend;
+                  this.$emit('onLocationSelected', this.form);
+                  console.log(this.form);
+              });
+      },
+  }
+}
+</script>
+<style>
+.map-box {
+  position: relative;
+
+}
+.map-search {
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 300px;
+
+}
+
+button {
+  border-radius: 0;
+}
+
+.icons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.time {
+  margin-top: 15px;
+  width: 100%;
+  font-size: 12px;
+  flex-wrap: wrap;
+  height: 70%;
+}
+ul{
+  background: white;
+  list-style-type: none;
+  padding-left: 0px;
+  height: 280px;
+  overflow: scroll;
+}
+li{
+  padding-left: 6px;
+  font-size: 10px;
+  text-align: left;
+  height: 40px;
+  line-height: 15px;
+  display: flex;
+  align-items: center;
+}
+li:hover{
+  cursor: pointer;
+  background: #f5f5f5;
+}
+</style>
\ No newline at end of file