修改中心点定位

index.html

@@ -223,14 +223,21 @@
     <!-- 高德地图 -->
     <script>
       window._AMapSecurityConfig = {
-        securityJsCode: 'ac1232036e1e20026f1e3e95338fc9c4'
+        securityJsCode: 'f811546a61cb67e8bbac45b371931323'
       }
+      // window._AMapSecurityConfig = {
+      //   securityJsCode: 'bfba507dd2b87770ba82019567e5bd4b'
+      // }
     </script>
     <!--引入高德地图JSAPI -->
     <script
       type="text/javascript"
-      src="https://webapi.amap.com/maps?v=2.0&key=df6e9416230b57f3c7f48be57dd2f813&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.SearchNearBy,AMap.Geocoder,AMap.Geolocation,AMap.Marker"
+      src="https://webapi.amap.com/maps?v=2.0&key=1d3839a0fe4ad113f7d88ec3775107b7&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.SearchNearBy,AMap.Geocoder,AMap.Geolocation,AMap.Marker"
     ></script>
+    <!-- <script
+      type="text/javascript"
+      src="https://webapi.amap.com/maps?v=2.0&key=69f36fd863068da639e2c7db66b437bf&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.SearchNearBy,AMap.Geocoder,AMap.Geolocation,AMap.Marker"
+    ></script> -->
     <!--引入UI组件库（1.1版本） -->
     <!-- <script src="https://webapi.amap.com/ui/1.1/main.js"></script> -->
   </body>

src/api/geopoliticalCustomers/types.ts

@@ -189,6 +189,8 @@ export interface CustomerDTO {
   distinguish?: string
   //详细地址
   detailAddress?: any
+  //门牌号
+  otherAddressesInfo?: string
   //半径
   radius?: any
   //报名状态

src/views/geopoliticalCustomers/geopoliticalCustomersModal.vue

@@ -109,15 +109,22 @@
         </a-col>
         <a-col :xl="10" :md="10" :sm="10">
           <a-form-item
-            :rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]"
+            :rules="[{ required: true, message: '请输入小区名称', trigger: 'change' }]"
             name="detailAddress"
           >
             <a-input
               id="tipinput"
               v-model:value="formModel.detailAddress"
+              autocomplete="off"
               placeholder="请输入小区名称"
-              :disabled="title === '编辑预约'"
+              :disabled="title === '编辑预约' || title === '编辑'"
-              :readonly="title === '详情' || title === '分发'"
+              class="custom-tooltip"
+              :title="formModel.address && formModel.address.length === 0 ? '请先选择省市区' : ''"
+              :readonly="
+                title === '详情' ||
+                title === '分发' ||
+                (formModel.address && formModel.address.length === 0)
+              "
             />
           </a-form-item>
         </a-col>
@@ -142,7 +149,7 @@
           <a-button
             v-if="title === '新建预约' || title === '编辑预约' || title === '编辑'"
             type="primary"
-            @click="match"
+            @click="match(formModel.detailAddress)"
             >匹配</a-button
           >
           <a-button
@@ -448,6 +455,12 @@ const addressChange = (value: any) => {
     formModel.economize = value[0]
     formModel.market = value[1]
     formModel.distinguish = value[2]
+    city.value = value[1].slice(0, -1)
+    cityAnddistinguish.value = value[1] + value[2]
+    console.log(cityAnddistinguish.value, 'cityAnddistinguish.value')
+    auto()
+    // console.log(city.value, 'city.value')
+    // formModel.detailAddress = value.toString() + formModel.detailAddress
   }
 }
 
@@ -521,14 +534,14 @@ const infoWindows = ref<any>({})
 //上一次点击的标记物id
 let previousId: any = null
 //匹配查询
-const pagingQuery = () => {
+const pagingQuery = (lng: number, lat: number) => {
   if (circle.value) {
     map.value.remove(circle.value)
   }
   const color = '#DFEBF3'
   // 创建圆形覆盖物
   circle.value = new AMap.Circle({
-    center: [lng.value, lat.value], // 圆心坐标
+    center: [lng, lat], // 圆心坐标
     radius: formModel.radius, // 半径，单位为米
     fillColor: color, // 填充颜色
     strokeColor: '#a1ceeb', // 边框颜色
@@ -537,92 +550,89 @@ const pagingQuery = () => {
   // 将圆形覆盖物添加到地图
   map.value.add(circle.value)
 
-  doRequest(
+  doRequest(getStoreData({ longitude: lng, latitude: lat, distance: formModel.radius }), {
-    getStoreData({ longitude: lng.value, latitude: lat.value, distance: formModel.radius }),
+    onSuccess: (result: any) => {
-    {
+      if (result.code === 200) {
-      onSuccess: (result: any) => {
+        if (result.data.length === 0) {
-        if (result.code === 200) {
+          message.info('当前位置附近暂无相关门店')
-          if (result.data.length === 0) {
+        } else {
-            message.info('当前位置附近暂无相关门店')
+          const ids = formModel.customStoreEntities.map(item => item.storeId)
-          } else {
+          listData.value.length = 0
-            const ids = formModel.customStoreEntities.map(item => item.storeId)
+          result.data &&
-            listData.value.length = 0
+            result.data.forEach((item: any) => {
-            result.data &&
+              const disabled = ids.includes(Number(item.id))
-              result.data.forEach((item: any) => {
+              listData.value.push({
-                const disabled = ids.includes(Number(item.id))
+                title: item.storeName,
-                listData.value.push({
+                description: item.address,
-                  title: item.storeName,
+                content: item.nid ? item.nid : '',
-                  description: item.address,
+                disabled: disabled,
-                  content: item.nid ? item.nid : '',
+                lat: item.latitude,
-                  disabled: disabled,
+                lng: item.longitude,
-                  lat: item.latitude,
+                id: item.id,
-                  lng: item.longitude,
+                index: item.index,
-                  id: item.id,
+                tel: item.nid ? item.nid : '',
-                  index: item.index,
+                reservationDate: item.reservationDate,
-                  tel: item.nid ? item.nid : '',
+                option: generateTimeSlots(item.tradeStartTime, item.tradeEndTime)
-                  reservationDate: item.reservationDate,
-                  option: generateTimeSlots(item.tradeStartTime, item.tradeEndTime)
-                })
-              })
-            pois.push(...listData.value)
-            // 设置缩放级别,设置地图视图级别为
-            const targetZoom = 12
-
-            //回调函数
-            const placeSearch_CallBack = (data: any) => {
-              const poiArr = data
-              infoWindows.value = new AMap.InfoWindow({
-                autoMove: true,
-                isCustom: true,
-                offset: { x: 0, y: -30 } // 信息窗体的偏移量
               })
-              //添加marker
+            })
-              const markers = new AMap.Marker({
+          pois.push(...listData.value)
-                map: map.value,
+          // 设置缩放级别,设置地图视图级别为
-                position: [poiArr.lng, poiArr.lat],
+          const targetZoom = 12
-                // clickable: true,//表示某个元素可以接收用户点击事件,默认值为true
+
-                // offset: new AMap.Pixel(-90, -70), // 设置偏移量以调整卡片位置
+          //回调函数
-                zIndex: 0, // 设置标记点的层级为 1000
+          const placeSearch_CallBack = (data: any) => {
-                extData: {
+            const poiArr = data
-                  id: `${poiArr.id}`
+            infoWindows.value = new AMap.InfoWindow({
-                  // 其他属性...
+              autoMove: true,
-                }
+              isCustom: true,
-              })
+              offset: { x: 0, y: -30 } // 信息窗体的偏移量
-              markers.on('click', function (data: any) {
+            })
-                const currentId = data.target.getExtData().id
+            //添加marker
-
+            const markers = new AMap.Marker({
-                if (
+              map: map.value,
-                  infoWindows.value.getIsOpen() &&
+              position: [poiArr.lng, poiArr.lat],
-                  (currentId === previousId || currentId === currentStoreId.value)
+              // clickable: true,//表示某个元素可以接收用户点击事件,默认值为true
-                ) {
+              // offset: new AMap.Pixel(-90, -70), // 设置偏移量以调整卡片位置
-                  // 信息窗体已打开,并且当前点击的标记物与上一次点击的标记物相同，或者与当前存储的门店标记物相同
+              zIndex: 0, // 设置标记点的层级为 1000
-                  currentStoreId.value = currentId
+              extData: {
-                  previousId = currentId
+                id: `${poiArr.id}`
-                  return false
+                // 其他属性...
-                }
+              }
-
+            })
-                infoWindows.value.open(map.value, markers.getPosition()) // 在地图上打开信息弹窗，并将信息弹窗显示在标记点的位置
+            markers.on('click', function (data: any) {
-                map.value.setZoomAndCenter(targetZoom, [data.lnglat.lng, data.lnglat.lat]) // 设置地图的缩放级别和中心点，使地图以指定的缩放级别和中心点进行显示
+              const currentId = data.target.getExtData().id
-                map.value.setCenter(markers.getPosition()) // 将地图的中心点设置为标记点的位置
+
-                infoWindows.value.setContent(createContent(poiArr)) // 将生成的内容设置到信息弹窗中
+              if (
-
+                infoWindows.value.getIsOpen() &&
-                // 更新上一次点击的标记物ID
+                (currentId === previousId || currentId === currentStoreId.value)
+              ) {
+                // 信息窗体已打开,并且当前点击的标记物与上一次点击的标记物相同，或者与当前存储的门店标记物相同
                 currentStoreId.value = currentId
                 previousId = currentId
-              })
+                return false
-            }
+              }
-            for (let i = 0; i < pois.length; i++) {
+
-              placeSearch_CallBack(pois[i])
+              infoWindows.value.open(map.value, markers.getPosition()) // 在地图上打开信息弹窗，并将信息弹窗显示在标记点的位置
-            }
+              map.value.setZoomAndCenter(targetZoom, [data.lnglat.lng, data.lnglat.lat]) // 设置地图的缩放级别和中心点，使地图以指定的缩放级别和中心点进行显示
+              map.value.setCenter(markers.getPosition()) // 将地图的中心点设置为标记点的位置
+              infoWindows.value.setContent(createContent(poiArr)) // 将生成的内容设置到信息弹窗中
+
+              // 更新上一次点击的标记物ID
+              currentStoreId.value = currentId
+              previousId = currentId
+            })
+          }
+          for (let i = 0; i < pois.length; i++) {
+            placeSearch_CallBack(pois[i])
           }
         }
       }
     }
-  )
+  })
 }
 
 //匹配
-const match = () => {
+const match = async (detailAddress: string) => {
   const fields = ['address', 'detailAddress', 'radius'] // 指定要校验的字段名
   formRef.value
     ?.validateFields(fields)
@@ -632,13 +642,48 @@ const match = () => {
       lng.value = undefined
       lat.value = undefined
       map.value.clearMap()
+      city.value = formModel.market?.slice(0, -1)
       AMap.plugin('AMap.Geocoder', function () {
         geocoder.value = new AMap.Geocoder({
-          city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+          city: city.value // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
         })
       })
       //标记中心点
-      getCenterMarker('match')
+      // 浙江省杭州市上城区九和路与杭海路交叉口西北约180米
+      // 创建地点搜索服务实例
+      const searchService = new AMap.PlaceSearch({
+        // 在这里填写您的高德地图 API Key
+        key: '1d3839a0fe4ad113f7d88ec3775107b7',
+        // 指定地点搜索服务的版本号
+        version: '2.0'
+      })
+      const addressValue = formModel.address?.toString().split(',').join('') + detailAddress
+      //标记中心点
+      // formModel.address?.toString().split(',').join('') + formModel.detailAddress
+
+      // 执行地点搜索
+      searchService.search(addressValue, (status: any, result: any) => {
+        if (status === 'complete' && result.info === 'OK') {
+          // 处理搜索结果
+          const pois = result.poiList.pois
+          // 对获取到的兴趣点列表进行处理
+          console.log(pois, 'pois')
+          console.log(pois[0].location.lng, pois[0].location.lat, 'pois经纬度')
+          getCenterMarker('match', pois[0].location.lng, pois[0].location.lat)
+          // await getCenterMarker('match', formModel.otherAddressesInfo)
+          // if (type === 'match') {
+
+          // formModel.otherAddressesInfo = detailAddress
+        } else {
+          // 地点搜索失败的处理逻辑
+          console.log('地点搜索失败')
+        }
+      })
+
+      // await getCenterMarker('match', formModel.otherAddressesInfo)
+      // // if (type === 'match') {
+      // pagingQuery()
+      // }
     })
     .catch(() => {
       // 校验失败
@@ -824,6 +869,7 @@ const formModel = reactive<CustomerDTO>({
   market: '',
   distinguish: '',
   detailAddress: '',
+  otherAddressesInfo: '',
   radius: '5000',
   enrollStatus: 1,
   customStoreEntities: []
@@ -905,6 +951,7 @@ defineExpose({
         market,
         distinguish,
         detailAddress,
+        otherAddressesInfo,
         radius,
         customStoreVOList
       } = data
@@ -918,6 +965,7 @@ defineExpose({
       formModel.market = market
       formModel.distinguish = distinguish
       formModel.detailAddress = detailAddress
+      formModel.otherAddressesInfo = otherAddressesInfo
       formModel.radius = radius
       formModel.customStoreEntities.push(...customStoreVOList)
       //获取预约时间段下拉框回显数据
@@ -927,13 +975,17 @@ defineExpose({
       if (opendata.type === 'audit') {
         // isReadOnly.value = true
         // reservationTimeisReadOnly.value = true
+        // city.value = formModel.market?.slice(0, -1)
+        isDisabled.value = true
         handleMapInit()
         title.value = '编辑'
         // formModel.description = 1
       } else if (opendata.type === 'edit') {
         isDisabled.value = true
         handleMapInit()
-
+        match(formModel.detailAddress)
+        //标记中心点
+        // getCenterMarker('init')
         title.value = '编辑预约'
       }
     }
@@ -966,7 +1018,7 @@ defineExpose({
       else if (opendata.type === 'distribute') {
         isReadOnly.value = true
         reservationTimeisReadOnly.value = true
-        handleMapInit()
+        // handleMapInit()
         title.value = '分发'
         formModel.description = 1
       }
@@ -984,6 +1036,7 @@ defineExpose({
 //地图
 // import { provincesAndCitiesAndAutonomousRegions } from '@/utils/geopolitical-customers'
 import type { ShowSearchType } from 'ant-design-vue/es/cascader'
+import { compileStyle } from 'vue/compiler-sfc'
 
 declare const AMap: any
 
@@ -998,68 +1051,200 @@ const autoComplete = ref()
 //点标记AMap.Marker
 //创建的一个 Marker 实例
 const marker = ref<any>({})
+//创建的一个 中心点Marker 实例
+const markerCenter = ref<any>({})
+const previousMarker = ref<any>({})
 //创建地图AMap.Map
 const map = ref<any>({})
+
 //使用geocoder做地理/逆地理编码
 //正向地理编码： 将地址 描述信息 转换成 地理坐标（经纬度），对应为AMap.Geocoder的getLocation方法
 //逆向地理编码：将 地理坐标（经纬度） 转换成 地址描述信息，对应为AMap.Geocoder的getAddress方法
 const geocoder = ref<any>({})
 
 //标记中心点封装的方法
-const getCenterMarker = (type: string) => {
+const getCenterMarker = (type: string, lng: number, lat: number) => {
-  const addressValue =
+  // const addressValue = ref<string>('')
-    //标记中心点
+  // if (address) {
-    formModel.address?.toString().split(',').join('') + formModel.detailAddress
+  //   addressValue.value = address
-  geocoder.value.getLocation(addressValue, function (status: any, result: any) {
+  // } else {
-    if (status === 'complete' && result.info === 'OK') {
+  //   addressValue.value =
-      // result中对应详细地理坐标信息
+  //     //标记中心点
-      lng.value = result.geocodes[0].location.lng
+  //     formModel.address?.toString().split(',').join('') + formModel.detailAddress
-      lat.value = result.geocodes[0].location.lat
+  //   // console.log(addressValue, 'addressValue')
-      // 设置地图中心点
+  // }
-      map.value.setCenter([lng.value, lat.value]) // 将经度和纬度作为参数传入
+  // console.log(addressValue.value, 'addressValue.value')
-      if (type === 'match') {
+
-        //修改地图的缩放级别
+  // 浙江省杭州市上城区九和路与杭海路交叉口西北约180米
-        map.value.setZoom(12) // 设置新的缩放级别，例如12
+  // geocoder.value.getLocation(addressValue.value, function (status: any, result: any) {
-      }
+  //   if (status === 'complete' && result.info === 'OK') {
-      // 创建标记并添加到地图上
+  // result中对应详细地理坐标信息
-      const marker = new AMap.Marker({
+  // lng.value = result.geocodes[0].location.lng
-        position: [lng.value, lat.value], // 设定标记的位置为地图中心点
+  // lat.value = result.geocodes[0].location.lat
-        zIndex: 100 // 设置标记点的 z-index 值为 100
+
-      })
+  // lng.value = lng
+  // lat.value = lat
+
+  // 设置地图中心点
+  map.value.setCenter([lng, lat]) // 将经度和纬度作为参数传入
+  if (type === 'match' || type === 'select') {
+    //修改地图的缩放级别
+    map.value.setZoom(12) // 设置新的缩放级别，例如12
+  }
+  // console.log(lng.value, lat.value, 'lng.value, lat.value')
 
-      // 设置标记点的样式
+  if (previousMarker.value && type === 'select') {
-      marker.setIcon(
+    map.value.remove(markerCenter.value) // 从地图上移除之前的中心点标记物
-        new AMap.Icon({
+  }
-          image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', // 使用红色标记点的图标 URL
+  // 创建标记并添加到地图上
-          size: new AMap.Size(18, 30), // 图标尺寸
+  markerCenter.value = new AMap.Marker({
-          imageSize: new AMap.Size(18, 30) // 图片尺寸
+    position: [lng, lat], // 设定标记的位置为地图中心点
-        })
+    zIndex: 100 // 设置标记点的 z-index 值为 100
-      )
-      marker.setMap(map.value) // 将标记添加到地图上
-    }
-    if (type === 'match') {
-      pagingQuery()
-    }
   })
+
+  // 设置标记点的样式
+  markerCenter.value.setIcon(
+    new AMap.Icon({
+      image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', // 使用红色标记点的图标 URL
+      size: new AMap.Size(18, 30), // 图标尺寸
+      imageSize: new AMap.Size(18, 30) // 图片尺寸
+    })
+  )
+
+  markerCenter.value.setMap(map.value) // 将标记添加到地图上
+  previousMarker.value = marker // 将新的中心点标记物赋值给 previousMarker
+
+  if (type === 'match') {
+    console.log(type, 'type')
+    pagingQuery(lng, lat)
+  }
+  // }
+  // })
 }
 // 当用户选择输入提示结果后进行查询操作
-const performQuery = (selectedTip: any) => {
+const performQuery = (selectedTip: any, detailAddress: string) => {
-  const geocoder = new AMap.Geocoder()
+  // 创建地点搜索服务实例
-  const location = selectedTip.location
+  const searchService = new AMap.PlaceSearch({
+    // 在这里填写您的高德地图 API Key
+    key: '1d3839a0fe4ad113f7d88ec3775107b7',
+    // 指定地点搜索服务的版本号
+    version: '2.0'
+  })
+  const addressValue = formModel.address?.toString().split(',').join('') + selectedTip.name
+  //标记中心点
+  // formModel.address?.toString().split(',').join('') + formModel.detailAddress
 
-  // 使用地理编码查询
+  // 执行地点搜索
-  geocoder.getAddress(location, function (status: any, result: any) {
+  searchService.search(addressValue, (status: any, result: any) => {
     if (status === 'complete' && result.info === 'OK') {
-      // 处理查询结果
+      // 处理搜索结果
-      const address = result.regeocode.formattedAddress
+      const pois = result.poiList.pois
-      console.log('查询结果：', address)
+      // 对获取到的兴趣点列表进行处理
-      // 进行其他操作...
+      console.log(pois, 'pois')
+      console.log(pois[0].location.lng, pois[0].location.lat, 'pois经纬度')
+      getCenterMarker('select', pois[0].location.lng, pois[0].location.lat)
+      formModel.otherAddressesInfo = `${pois[0].location.lng},${pois[0].location.lat}`
+    } else {
+      // 地点搜索失败的处理逻辑
+      console.log('地点搜索失败')
     }
   })
+  // const geocoder = new AMap.Geocoder()
+  // const location = selectedTip.location
+  // if (location) {
+  //   // 使用地理编码查询
+  //   geocoder.getAddress(location, function (status: any, result: any) {
+  //     if (status === 'complete' && result.info === 'OK') {
+  //       // 处理查询结果
+  //       const address = result.regeocode.formattedAddress
+  //       console.log('查询结果：', address)
+  //       console.log(detailAddress, 'detailAddress')
+
+  //       // 进行其他操作...
+  //       match()
+
+  //       // detailAddress = detailAddress.substring(0, 14)
+  //       // if (detailAddress === '浙江省杭州市上城区九和路8号华侨国际·新侨创智中心') {
+  //       //   detailAddress = detailAddress.substring(0, detailAddress.indexOf('号') + 1)
+  //       //   console.log(detailAddress, 'detailAddress1111')
+  //       //   //标记中心点
+  //       //   getCenterMarker('select', detailAddress)
+  //       //   formModel.otherAddressesInfo = detailAddress
+  //       // } else {
+  //       //   //标记中心点
+  //       //   getCenterMarker('select', detailAddress)
+  //       //   formModel.otherAddressesInfo = detailAddress
+  //       // }
+  //     }
+  //   })
+  // } else {
+  //   message.info('地址错误,请重新进行选择')
+  // }
+}
+const city = ref<string | undefined>('')
+const cityAnddistinguish = ref<string | undefined>('')
+
+const detailAddress = ref<string>('')
+const auto = async () => {
+  await AMap.plugin('AMap.AutoComplete', function () {
+    // 实例化Autocomplete
+    // cityAnddistinguish.value
+    const autoOptions = {
+      city: '浙江省杭州市西湖区', // 限定城市，默认全国
+      input: 'tipinput',
+      citylimit: true,
+      noLocation: true // 禁用定位功能
+    }
+    console.log(cityAnddistinguish.value, 'cityAnddistinguish.value')
+    autoComplete.value = new AMap.AutoComplete(autoOptions)
+    setTimeout(() => {
+      // autoComplete.value?.on('beforeSearch', (e: any) => {
+      //   const keywords = e.keywords // 获取用户输入的关键字
+      //   console.log(keywords, 'keywords')
+      //   e.keywords = `${formModel.market} ${keywords}` // 在关键字前加上用户选择的区域信息
+      //   // const selectedDistrict = formModel.market // 获取用户选择的区域信息
+
+      //   // 设置搜索关键字的限制条件
+      //   // if (selectedDistrict && selectedDistrict !== '西湖区') {
+      //   //   e.keywords = `${selectedDistrict} ${keywords}` // 在关键字前加上用户选择的区域信息
+      //   // }
+      // })
+      autoComplete.value?.on('select', (e: any) => {
+        // console.log(e.poi, 'e.poi')
+        // const selectedTip = e.poi // 获取用户选择的提示结果对象
+        // formModel.detailAddress = selectedTip.name // 将选中的提示项名称赋值给输入框的值（使用 v-model 来绑定）
+        // detailAddress.value = selectedTip.district + selectedTip.address
+        // // console.log(formModel.detailAddress, 'formModel.detailAddress')
+        // performQuery(selectedTip, detailAddress.value) // 执行查询操作
+        const selectedTip = e.poi
+        if (selectedTip.district === formModel.market) {
+          // 处理选择的提示结果
+          formModel.detailAddress = selectedTip.name
+          detailAddress.value = selectedTip.district + selectedTip.address
+          performQuery(selectedTip, detailAddress.value)
+        } else {
+          // 忽略其他区域的提示结果
+          message.info(`只能选择${formModel.distinguish}内的地址`)
+          // console.log('只能选择西湖区内的地址')
+        }
+      })
+    }, 300)
+
+    AMap.plugin('AMap.Geocoder', function () {
+      geocoder.value = new AMap.Geocoder({
+        // city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+        city: city.value
+      })
+    })
+
+    // geocoder.value = new AMap.Geocoder({
+    //   city: '010' //城市设为北京，默认：“全国”
+    // })
+  })
 }
 
 //创建地图
-const initMap = () => {
+const initMap = async () => {
   map.value = new AMap.Map('draw-station-container', {
     // center: [120.1551, 30.2741], // 地图中心点经纬度
     zoom: 18 // 缩放级别
@@ -1084,32 +1269,28 @@ const initMap = () => {
   //   }
   // })
 
-  AMap.plugin('AMap.AutoComplete', function () {
+  // AMap.plugin('AMap.AutoComplete', function () {
-    // 实例化Autocomplete
+  //   // 实例化Autocomplete
-    const autoOptions = {
+  //   const autoOptions = {
-      //city 限定城市，默认全国
+  //     city: city.value, // 限定城市，默认全国
-      input: 'tipinput'
+  //     input: 'tipinput'
-    }
+  //   }
 
-    autoComplete.value = new AMap.AutoComplete(autoOptions)
+  //   autoComplete.value = new AMap.AutoComplete(autoOptions)
-    // geocoder.value = new AMap.Geocoder({
+  //   // geocoder.value = new AMap.Geocoder({
-    //   city: '010' //城市设为北京，默认：“全国”
+  //   //   city: '010' //城市设为北京，默认：“全国”
-    // })
+  //   // })
-  })
+  // })
-  setTimeout(() => {
+  await auto()
-    autoComplete.value?.on('select', (e: any) => {
+  if (title.value === '编辑预约' || title.value === '编辑') {
-      const selectedTip = e.poi // 获取用户选择的提示结果对象
+    // city.value = formModel.market?.slice(0, -1)
-      formModel.detailAddress = selectedTip.name // 将选中的提示项名称赋值给输入框的值（使用 v-model 来绑定）
+    //标记中心点
-      performQuery(selectedTip) // 执行查询操作
+    getCenterMarker(
-    })
+      'init',
-  }, 300)
+      Number(formModel.otherAddressesInfo?.split(',')[0]),
-  AMap.plugin('AMap.Geocoder', function () {
+      Number(formModel.otherAddressesInfo?.split(',')[1])
-    geocoder.value = new AMap.Geocoder({
+    )
-      city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+  }
-    })
-  })
-  //标记中心点
-  getCenterMarker('init')
 
   // map.value.add(marker.value)
 }
@@ -1359,4 +1540,27 @@ const storeItemClick = (item: any, index: number) => {
 ::v-deep .ant-space-item {
   width: 100% !important;
 }
+//a-input鼠标移入提示请先选择省市区
+.custom-tooltip {
+  position: relative;
+}
+.custom-tooltip::before {
+  content: attr(title);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  padding: 5px;
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+  border-top: none;
+  font-size: 14px;
+  color: #333;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+.custom-tooltip:hover::before {
+  opacity: 1;
+}
 </style>

vite.config.ts

@@ -22,13 +22,13 @@ import { antdvStyleDeps } from './src/utils/resolvers'
 //项目
 // const serverAddress = 'http://admin.ballcat.cn'
 //xy
-const serverAddress = 'http://172.18.0.225:8000'
+// const serverAddress = 'http://172.18.0.225:8000'
 //jt
 // const serverAddress = 'http://172.18.1.8:8000'
 //ts
 // const serverAddress = 'http://172.18.0.228:8000'
 //测试
-// const serverAddress = 'http://39.100.77.21:8000'
+const serverAddress = 'http://39.100.77.21:8000'
 
 //线上ip
 // const serverAddress = 'http://175.27.212.74:80'