From 95a14f596c8559eeecfd041bcc32e6bd25a1e5df Mon Sep 17 00:00:00 2001
From: helen <zhushui060631@163.com>
Date: Fri, 27 Dec 2024 11:39:30 +0800
Subject: [PATCH] map

---
 src/components/Map/index.vue          | 102 +++++++++++++++++++-------
 src/views/manage/hotel/index.vue      |  84 ++++++++++++++++-----
 src/views/manage/noteManage/index.vue |   7 +-
 src/views/manage/scenic/index.vue     |   4 +-
 vite.config.ts                        |   4 +-
 5 files changed, 150 insertions(+), 51 deletions(-)

diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue
index 378b0fb..0ce92da 100644
--- a/src/components/Map/index.vue
+++ b/src/components/Map/index.vue
@@ -2,17 +2,25 @@
   <!-- 带有搜索地点的地图 -->
   <div>
     <el-form-item :label="title">
-      <el-input
-        v-model="form.address"
-        :placeholder="`请输入${title}`"
-        class="input-with-select"
+      <el-select
+        v-model="searchLocation"
+        filterable
+        remote
+        reserve-keyword
+        clearable
+        placeholder="请输入地址信息"
+        :remote-method="remoteMethod"
+        @change="selectChnange"
         style="width: 300px"
-        @keyup.enter="debouncedSearch(form.address)"
       >
-        <template #append>
-          <el-button :icon="Search" @click="debouncedSearch(form.address)" />
-        </template>
-      </el-input>
+        <el-option
+          v-for="item in locationOptions"
+          :key="item.id"
+          :label="item.title + '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp' + item.province + ' - ' + item.city"
+          :value="item.province + item.city + item.title"
+        />
+        <!-- :value="item.ad_info.province+item.ad_info.city+item.title" /> -->
+      </el-select>
     </el-form-item>
     <tlbs-map
       ref="map"
@@ -26,6 +34,15 @@
     >
       <tlbs-multi-marker :geometries="geometries" :styles="styles" :options="options" />
     </tlbs-map>
+    <el-form-item label="详细地址" prop="address" style="margin-top: 15px">
+      <el-input v-model="form.address" placeholder="输入地理位置或点击度图上的地点" disabled />
+    </el-form-item>
+    <el-form-item label="经度" prop="longitude">
+      <el-input v-model="form.longitude" placeholder="输入地理位置或点击度图上的地点" disabled />
+    </el-form-item>
+    <el-form-item label="纬度" prop="latitude">
+      <el-input v-model="form.latitude" placeholder="输入地理位置或点击度图上的地点" disabled />
+    </el-form-item>
   </div>
 </template>
 
@@ -73,7 +90,39 @@ const form = ref(
     regionCode: ''
   }
 );
+const searchLocation = ref(props.datas.address||''); // 搜索地点
+
+const locationOptions = ref([]); //腾讯地图返回的搜索地址列表
 watch(() => props.modelValue);
+// 地理位置 输入实时搜索
+const remoteMethod = (query: string) => {
+  if (query !== '') {
+    // 调用腾讯地图API进行搜索，并展示在地图上
+    // geocoder(query).then((result) => {
+    //   console.log(result);
+    // });
+    console.log(query);
+    // jsonp(`https://apis.map.qq.com/ws/place/v1/search?key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&keyword=${encodeURI(query)}&boundary=nearby(20.018883,110.348801,1000)&output=jsonp`, {}).then((res) => {
+    jsonp(
+      `https://apis.map.qq.com/ws/place/v1/suggestion?key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&keyword=${encodeURI(query)}&region=三亚市&region_fix=0&output=jsonp`,
+      {}
+    ).then((res) => {
+      // if (res.region.title!=='海南省') {
+      //   proxy?.$modal.msgError('仅支持海南省地理位置');
+      //   return
+      // }
+      if (res.status == 0) {
+        locationOptions.value = res.data;
+      }
+    });
+  }
+};
+// 选择地理位置 下拉框值变化
+const selectChnange = (val: string) => {
+  if (val) {
+    debouncedSearch(searchLocation.value);
+  }
+};
 // 点击地点，获取经纬度及地址信息
 const onClick = (e: any) => {
   jsonp(
@@ -82,15 +131,15 @@ const onClick = (e: any) => {
   ).then((data) => {
     if (data.status == 0) {
       if (form.value) {
-        // form.value.address =
-        //   data.result.address_component.province +
-        //   data.result.address_component.city +
-        //   data.result.address_component.district +
-        //   data.result.address_component.street +
-        //   data.result.address_component.street_number;
+        form.value.address =
+          data.result.address_component.province +
+          data.result.address_component.city +
+          data.result.address_component.district +
+          data.result.address_component.street +
+          data.result.address_component.street_number +data.result.title;
         form.value.latitude = data.result.location.lat;
         form.value.longitude = data.result.location.lng;
-        form.value.address = data.result.formatted_addresses.recommend;
+        // form.value.address = data.result.formatted_addresses.recommend;
         // form.value.city = data.result.address_component.city;
         // form.value.region = data.result.ad_info.adcode; //行政区划编码
         form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
@@ -119,18 +168,18 @@ const performSearch = async (text) => {
     jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?address=${text}&key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&output=jsonp`, {}).then((data) => {
       console.log(data);
       if (data.status == 0) {
-        // form.value.address =
-        //   data.result.address_components.province +
-        //   data.result.address_components.city +
-        //   data.result.address_components.district +
-        //   data.result.address_components.street +
-        //   data.result.address_components.street_number;
+        form.value.address =
+          data.result.address_components.province +
+          data.result.address_components.city +
+          data.result.address_components.district +
+          data.result.address_components.street +
+          data.result.address_components.street_number + data.result.title;
         form.value.latitude = data.result.location.lat;
         form.value.longitude = data.result.location.lng;
         // form.value.region = data.result.ad_info.adcode; //行政区划编码
         // form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
 
-        form.value.address = text;
+        // form.value.address = text;
         // form.value.city = data.result.address_components.city;
         center.value = { lat: data.result.location.lat, lng: data.result.location.lng };
         geometries.value = [{ styleId: 'marker', position: { lat: data.result.location.lat, lng: data.result.location.lng } }];
@@ -147,16 +196,15 @@ const performSearch = async (text) => {
 const debouncedSearch = debounce(performSearch, 300); // 创建防抖后的搜索函数，延迟设为300毫秒
 
 const map = ref(null);
-const center = ref({ lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 });
-const zoom = ref(20);
+const center = ref({ lat: form.value.latitude ||  20.018883, lng: form.value.longitude ||  110.348801 });
+const zoom = ref(147);
 const control = reactive({
   scale: {},
   zoom: {
     position: 'topLeft'
   }
 });
-const searchLocation = ref(''); // 搜索地点
-const geometries = ref([{ styleId: 'marker', position: { lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 } }]);
+const geometries = ref([{ styleId: 'marker', position: { lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 } }]);
 const styles = reactive({
   marker: {
     width: 20,
diff --git a/src/views/manage/hotel/index.vue b/src/views/manage/hotel/index.vue
index 738d4ad..4fa5113 100644
--- a/src/views/manage/hotel/index.vue
+++ b/src/views/manage/hotel/index.vue
@@ -24,7 +24,7 @@
     </transition>
 
     <el-card shadow="never">
-      <el-table v-loading="loading" :data="hotelList">
+      <el-table v-loading="loading" :data="hotelList" border>
         <el-table-column fixed label="序号" align="center" width="80">
           <template #default="scope">
             <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
@@ -87,17 +87,24 @@
           <el-col :span="24">
             <el-form-item label="地理位置" prop="address">
               <!-- <el-input v-model="searchLocation" type="text" placeholder="请输入地址信息" clearable /> -->
-              <el-input
-                v-model="form.address"
+              <el-select
+                v-model="searchLocation"
+                filterable
+                remote
+                reserve-keyword
+                clearable
                 placeholder="请输入地址信息"
-                class="input-with-select"
-                style="width: 300px"
-                @keyup.enter="debouncedSearch(form.address)"
+                :remote-method="remoteMethod"
+                @change="selectChnange"
               >
-                <template #append>
-                  <el-button :icon="Search" @click="debouncedSearch(form.address)" />
-                </template>
-              </el-input>
+                <el-option
+                  v-for="item in locationOptions"
+                  :key="item.id"
+                  :label="item.title + '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp' + item.province + ' - ' + item.city + '-' + item.district"
+                  :value="item.province + item.city + item.title"
+                />
+                <!-- :value="item.ad_info.province+item.ad_info.city+item.title" /> -->
+              </el-select>
             </el-form-item>
             <tlbs-map
               v-if="dialog.visible"
@@ -112,6 +119,15 @@
             >
               <tlbs-multi-marker :geometries="geometries" :styles="styles" :options="options" />
             </tlbs-map>
+            <el-form-item label="详细地址" prop="address" style="margin-top: 15px">
+              <el-input v-model="form.address" placeholder="输入地理位置或点击度图上的地点" disabled />
+            </el-form-item>
+            <el-form-item label="经度" prop="longitude">
+              <el-input v-model="form.longitude" placeholder="输入地理位置或点击度图上的地点" disabled />
+            </el-form-item>
+            <el-form-item label="纬度" prop="latitude">
+              <el-input v-model="form.latitude" placeholder="输入地理位置或点击度图上的地点" disabled />
+            </el-form-item>
           </el-col>
         </el-row>
       </el-form>
@@ -143,6 +159,7 @@ const idsname = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
+const locationOptions = ref([]); //腾讯地图返回的搜索地址列表
 
 const queryFormRef = ref<ElFormInstance>();
 const hotelFormRef = ref<ElFormInstance>();
@@ -251,8 +268,9 @@ const handleAdd = () => {
   reset();
   dialog.visible = true;
   dialog.title = '添加住宿';
-  geometries.value = [{ styleId: 'marker', position: { lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 } }];
-  center.value = { lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 };
+  searchLocation.value = '';
+  geometries.value = [{ styleId: 'marker', position: { lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 } }];
+  center.value = { lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 };
 };
 
 /** 修改按钮操作 */
@@ -316,7 +334,35 @@ const handleEdit = async (row?: HotelVO) => {
   proxy?.$modal.msgSuccess(messages);
   await getList();
 };
-
+// 地理位置 输入实时搜索
+const remoteMethod = (query: string) => {
+  if (query !== '') {
+    // 调用腾讯地图API进行搜索，并展示在地图上
+    // geocoder(query).then((result) => {
+    //   console.log(result);
+    // });
+    console.log(query);
+    // jsonp(`https://apis.map.qq.com/ws/place/v1/search?key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&keyword=${encodeURI(query)}&boundary=nearby(20.018883,110.348801,1000)&output=jsonp`, {}).then((res) => {
+    jsonp(
+      `https://apis.map.qq.com/ws/place/v1/suggestion?key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&keyword=${encodeURI(query)}&region=三亚市&region_fix=0&output=jsonp`,
+      {}
+    ).then((res) => {
+      // if (res.region.title!=='海南省') {
+      //   proxy?.$modal.msgError('仅支持海南省地理位置');
+      //   return
+      // }
+      if (res.status == 0) {
+        locationOptions.value = res.data;
+      }
+    });
+  }
+};
+// 选择地理位置 下拉框值变化
+const selectChnange = (val: string) => {
+  if (val) {
+    debouncedSearch(searchLocation.value);
+  }
+};
 //输入位置，搜索位置
 const performSearch = async (text) => {
   // 这里简单模拟延迟，模拟真实的异步请求耗时
@@ -338,7 +384,8 @@ const performSearch = async (text) => {
           data.result.address_components.city +
           data.result.address_components.district +
           data.result.address_components.street +
-          data.result.address_components.street_number;
+          data.result.address_components.street_number +
+          data.result.title;
         form.value.latitude = data.result.location.lat;
         form.value.longitude = data.result.location.lng;
         // form.value.region = data.result.ad_info.adcode; //行政区划编码
@@ -368,7 +415,8 @@ const onClick = (e: any) => {
           data.result.address_component.city +
           data.result.address_component.district +
           data.result.address_component.street +
-          data.result.address_component.street_number;
+          data.result.address_component.street_number +
+          data.result.title;
         form.value.latitude = data.result.location.lat;
         form.value.longitude = data.result.location.lng;
         // form.value.province = data.result.address_component.province;
@@ -385,8 +433,8 @@ const onClick = (e: any) => {
 const debouncedSearch = debounce(performSearch, 300); // 创建防抖后的搜索函数，延迟设为300毫秒
 
 const map = ref(null);
-const center = ref({ lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 });
-const zoom = ref(20);
+const center = ref({ lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 });
+const zoom = ref(17);
 const control = reactive({
   scale: {},
   zoom: {
@@ -394,7 +442,7 @@ const control = reactive({
   }
 });
 const searchLocation = ref(''); // 搜索地点
-const geometries = ref([{ styleId: 'marker', position: { lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 } }]);
+const geometries = ref([{ styleId: 'marker', position: { lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 } }]);
 const styles = reactive({
   marker: {
     width: 20,
diff --git a/src/views/manage/noteManage/index.vue b/src/views/manage/noteManage/index.vue
index 00932b8..b2b3655 100644
--- a/src/views/manage/noteManage/index.vue
+++ b/src/views/manage/noteManage/index.vue
@@ -365,6 +365,9 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryParams.value.status = '';
+  queryParams.value.title = '';
+  queryParams.value.location = '';
+  queryParams.value.updateByName = '';
   queryFormRef.value?.resetFields();
   handleQuery();
 };
@@ -419,8 +422,8 @@ const contenttext = async (row?: NotebookVO) => {
 };
 /** 提交按钮 */
 const submitForm = async (type) => {
-  form.value.tagId = tagvalue.value.join(',');
-  form.value.location = addressvalue.value.join(',');
+  form.value.tagId = tagvalue.value == '' ? '' : tagvalue.value.join(',');
+  form.value.location = addressvalue.value == '' ? '' : addressvalue.value.join(',');
   form.value.cover = '';
   form.value.status = Number(type);
   form.value.content = form.value.content == '<p><br></p>' ? '' : form.value.content;
diff --git a/src/views/manage/scenic/index.vue b/src/views/manage/scenic/index.vue
index ee2d7fb..b3104d7 100644
--- a/src/views/manage/scenic/index.vue
+++ b/src/views/manage/scenic/index.vue
@@ -267,7 +267,7 @@
                 <!-- :value="item.ad_info.province+item.ad_info.city+item.title" /> -->
               </el-select>
             </el-form-item>
-            <tlbs-map style="margin-left: 80px" ref="map" api-key="	
+            <tlbs-map style="margin-left: 80px" ref="map" api-key="
 6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO" :center="center" :zoom="zoom" :control="control" @click="onClick">
               <tlbs-multi-marker :geometries="geometries" :styles="styles" :options="options" />
             </tlbs-map>
@@ -679,7 +679,7 @@ const performSearch = async (text) => {
         form.value.longitude = data.result.location.lng;
         form.value.region = data.result.ad_info.adcode; //行政区划编码
         form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
-        
+
         // form.value.province = data.result.address_components.province;
         // form.value.city = data.result.address_components.city;
         center.value = { lat: data.result.location.lat, lng: data.result.location.lng };
diff --git a/vite.config.ts b/vite.config.ts
index e731a01..d58b63b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -25,8 +25,8 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
       open: true,
       proxy: {
         [env.VITE_APP_BASE_API]: {
-          target: 'http://192.168.18.23:8080', //维嘉
-          // target: 'http://192.168.18.113:8080',//华伟
+          // target: 'http://192.168.18.23:8080', //维嘉
+          target: 'http://192.168.18.113:8080',//华伟
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')