From 2a02861d93aa915c3c5611f4835dfaddd5c4112f Mon Sep 17 00:00:00 2001
From: Lufaneng <Lufaneng@foxmail.com>
Date: Wed, 30 Jul 2025 16:09:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=88=9D=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                       |   9 +
 src/components/MapSelector.md             |  89 ++++
 src/components/MapSelector.vue            | 522 ++++++++++++++++++++++
 src/config/map.js                         |  19 +
 src/views/BusinessManage/HandleDialog.vue |  88 ++--
 src/views/BusinessManage/index.vue        |   2 +-
 src/views/CustomerManage/index.vue        |   2 +-
 7 files changed, 697 insertions(+), 34 deletions(-)
 create mode 100644 src/components/MapSelector.md
 create mode 100644 src/components/MapSelector.vue
 create mode 100644 src/config/map.js

diff --git a/src/components.d.ts b/src/components.d.ts
index f46eab1..0aad524 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
@@ -41,9 +42,17 @@ declare module 'vue' {
     IEpMessageBox: typeof import('~icons/ep/message-box')['default']
     IEpPlus: typeof import('~icons/ep/plus')['default']
     IEpScaleToOriginal: typeof import('~icons/ep/scale-to-original')['default']
+    MapSelector: typeof import('./components/MapSelector.vue')['default']
+    MapSelectorFinal: typeof import('./components/MapSelectorFinal.vue')['default']
+    MapSelectorFixed: typeof import('./components/MapSelectorFixed.vue')['default']
+    MapSelectorOptimized: typeof import('./components/MapSelectorOptimized.vue')['default']
+    MapSelectorSimple: typeof import('./components/MapSelectorSimple.vue')['default']
+    MapSelectorWithMarker: typeof import('./components/MapSelectorWithMarker.vue')['default']
+    MapTest: typeof import('./components/MapTest.vue')['default']
     Pagination: typeof import('./components/Pagination/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SimpleMapTest: typeof import('./components/SimpleMapTest.vue')['default']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
diff --git a/src/components/MapSelector.md b/src/components/MapSelector.md
new file mode 100644
index 0000000..be585cc
--- /dev/null
+++ b/src/components/MapSelector.md
@@ -0,0 +1,89 @@
+# 腾讯地图坐标选择器使用说明 (基于 tlbs-map-vue)
+
+## 功能说明
+MapSelector 是一个基于 `tlbs-map-vue` 的坐标选择器组件，用于在地图上选择经纬度坐标。
+
+## 技术栈
+- Vue 3
+- tlbs-map-vue (腾讯地图官方 Vue 组件库)
+- Element Plus
+
+## 安装依赖
+```bash
+npm install tlbs-map-vue
+```
+
+## 使用方法
+
+### 1. 配置腾讯地图API密钥
+在 `src/config/map.js` 文件中，将 `TENCENT_MAP_KEY` 替换为你的实际API密钥：
+
+```javascript
+export const MAP_CONFIG = {
+  TENCENT_MAP_KEY: '你的腾讯地图API密钥',
+  // ...其他配置
+}
+```
+
+### 2. 获取腾讯地图API密钥
+1. 访问腾讯位置服务官网：https://lbs.qq.com/
+2. 注册并登录账号
+3. 创建应用并获取API密钥（WebServiceAPI密钥）
+4. 在控制台中配置域名白名单
+
+### 3. 在组件中使用
+```vue
+<template>
+  <MapSelector
+    v-model="showMapSelector"
+    :longitude="formField.longitude"
+    :latitude="formField.latitude"
+    @confirm="handleCoordinateConfirm"
+  />
+</template>
+
+<script setup>
+import MapSelector from '@/components/MapSelector.vue'
+
+const showMapSelector = ref(false)
+const formField = ref({
+  longitude: null,
+  latitude: null
+})
+
+const handleCoordinateConfirm = (coordinates) => {
+  formField.value.longitude = coordinates.longitude
+  formField.value.latitude = coordinates.latitude
+}
+</script>
+```
+
+## Props
+- `modelValue`: Boolean - 控制对话框显示/隐藏
+- `longitude`: Number - 初始经度值
+- `latitude`: Number - 初始纬度值
+
+## Events
+- `update:modelValue`: 更新对话框显示状态
+- `confirm`: 确认选择坐标时触发，返回 `{longitude, latitude}` 对象
+
+## 特性
+- ✅ 基于腾讯地图官方 Vue 组件库
+- ✅ 支持点击地图选择坐标
+- ✅ 实时显示选择的经纬度
+- ✅ 支持初始坐标显示
+- ✅ 响应式设计
+- ✅ 自动处理地图加载
+
+## 注意事项
+1. 确保已正确配置腾讯地图API密钥
+2. 需要在腾讯地图控制台中配置域名白名单
+3. 在生产环境中建议将API密钥配置在环境变量中
+4. 使用的是 WebServiceAPI 密钥，不是 JavaScript API 密钥
+
+## 故障排除
+如果地图无法显示：
+1. 检查 API 密钥是否正确
+2. 确认域名已添加到白名单
+3. 检查网络连接
+4. 查看浏览器控制台错误信息
\ No newline at end of file
diff --git a/src/components/MapSelector.vue b/src/components/MapSelector.vue
new file mode 100644
index 0000000..0b77fb7
--- /dev/null
+++ b/src/components/MapSelector.vue
@@ -0,0 +1,522 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    title="选择坐标"
+    width="800px"
+    :close-on-click-modal="false"
+    @closed="handleClose"
+    @opened="handleOpened"
+  >
+    <div class="map-container">
+      <div
+        ref="mapContainer"
+        style="width: 100%; height: 400px; border: 1px solid #ccc; position: relative; z-index: 1"
+        v-loading="mapLoading || isGettingLocation"
+        :element-loading-text="isGettingLocation ? '正在获取当前位置...' : '正在加载地图...'"
+      >
+        <!-- 自定义标记 -->
+        <div v-if="markerPosition && map" class="custom-marker" :style="markerPosition">
+          <div class="marker-pin"></div>
+          <div class="marker-shadow"></div>
+        </div>
+      </div>
+
+      <!-- 错误提示 -->
+      <div v-if="mapError" class="error-info">
+        <el-alert :title="mapError" type="error" :closable="false" show-icon />
+      </div>
+
+      <!-- 坐标信息 -->
+      <div v-else class="coordinate-info">
+        <p>当前选择坐标：经度 {{ selectedLng || '未选择' }}, 纬度 {{ selectedLat || '未选择' }}</p>
+        <p class="tip">点击地图选择坐标位置</p>
+        <p
+          v-if="selectedLng && selectedLat && !props.longitude && !props.latitude"
+          class="current-location-info"
+        >
+          📍 已自动定位到当前位置
+        </p>
+        <p v-else-if="selectedLng && selectedLat" class="selected-info">✅ 已选择坐标点</p>
+      </div>
+
+      <!-- 使用原生按钮 -->
+      <div class="native-button-area">
+        <button
+          type="button"
+          class="location-btn"
+          @click="getCurrentLocationManually"
+          :disabled="isGettingLocation"
+        >
+          {{ isGettingLocation ? '定位中...' : '📍 获取当前位置' }}
+        </button>
+        <button type="button" class="cancel-btn" @click="handleClose">取消</button>
+        <button
+          type="button"
+          class="confirm-btn"
+          :disabled="!selectedLng || !selectedLat"
+          @click="confirmSelection"
+        >
+          确定
+        </button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { MAP_CONFIG } from '@/config/map'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  longitude: {
+    type: Number,
+    default: null,
+  },
+  latitude: {
+    type: Number,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const mapContainer = ref(null)
+const selectedLng = ref(props.longitude || null)
+const selectedLat = ref(props.latitude || null)
+const mapLoading = ref(false)
+const mapError = ref('')
+const markerPosition = ref(null)
+const isGettingLocation = ref(false)
+
+let map = null
+let isMapInitialized = false
+
+// 获取当前位置
+const getCurrentLocation = () => {
+  return new Promise((resolve, reject) => {
+    if (!navigator.geolocation) {
+      reject(new Error('浏览器不支持地理位置获取'))
+      return
+    }
+
+    isGettingLocation.value = true
+    console.log('开始获取当前位置...')
+
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { longitude, latitude } = position.coords
+        console.log('获取到当前位置:', { longitude, latitude })
+        resolve({ longitude, latitude })
+      },
+      (error) => {
+        console.error('获取位置失败:', error)
+        let errorMessage = '获取位置失败'
+
+        switch (error.code) {
+          case error.PERMISSION_DENIED:
+            errorMessage = '用户拒绝了位置请求'
+            break
+          case error.POSITION_UNAVAILABLE:
+            errorMessage = '位置信息不可用'
+            break
+          case error.TIMEOUT:
+            errorMessage = '获取位置超时'
+            break
+        }
+
+        reject(new Error(errorMessage))
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 10000,
+        maximumAge: 60000,
+      }
+    )
+  }).finally(() => {
+    isGettingLocation.value = false
+  })
+}
+
+// 动态加载腾讯地图API
+const loadTencentMapAPI = () => {
+  return new Promise((resolve, reject) => {
+    if (window.TMap) {
+      resolve()
+      return
+    }
+
+    const script = document.createElement('script')
+    script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${MAP_CONFIG.TENCENT_MAP_KEY}`
+    script.onload = () => {
+      if (window.TMap) {
+        resolve()
+      } else {
+        reject(new Error('腾讯地图API加载失败'))
+      }
+    }
+    script.onerror = () => reject(new Error('腾讯地图API加载失败'))
+    document.head.appendChild(script)
+  })
+}
+
+// 将经纬度转换为屏幕坐标
+const latLngToPixel = (lat, lng) => {
+  if (!map) return null
+
+  try {
+    const point = map.projectToContainer(new window.TMap.LatLng(lat, lng))
+    return {
+      left: point.getX() + 'px',
+      top: point.getY() + 'px',
+    }
+  } catch (error) {
+    console.error('坐标转换失败:', error)
+    return null
+  }
+}
+
+// 更新标记位置
+const updateMarkerPosition = () => {
+  if (selectedLng.value && selectedLat.value && map) {
+    const position = latLngToPixel(selectedLat.value, selectedLng.value)
+    markerPosition.value = position
+  } else {
+    markerPosition.value = null
+  }
+}
+
+// 初始化地图
+const initMap = async () => {
+  if (!mapContainer.value || isMapInitialized) return
+
+  mapLoading.value = true
+  mapError.value = ''
+
+  try {
+    await loadTencentMapAPI()
+
+    // 确定地图中心点
+    let centerLat = props.latitude || MAP_CONFIG.DEFAULT_CENTER.latitude
+    let centerLng = props.longitude || MAP_CONFIG.DEFAULT_CENTER.longitude
+
+    // 如果没有传入坐标，尝试获取当前位置
+    if (!props.latitude && !props.longitude) {
+      try {
+        const currentLocation = await getCurrentLocation()
+        centerLat = currentLocation.latitude
+        centerLng = currentLocation.longitude
+
+        // 设置选中的坐标为当前位置
+        selectedLat.value = currentLocation.latitude
+        selectedLng.value = currentLocation.longitude
+
+        ElMessage.success('已获取到当前位置')
+        console.log('使用当前位置作为地图中心:', { centerLat, centerLng })
+      } catch (locationError) {
+        console.warn('获取当前位置失败，使用默认位置:', locationError.message)
+        ElMessage.warning('获取当前位置失败，使用默认位置')
+      }
+    }
+
+    // 创建地图实例
+    map = new window.TMap.Map(mapContainer.value, {
+      center: new window.TMap.LatLng(centerLat, centerLng),
+      zoom: MAP_CONFIG.DEFAULT_ZOOM,
+    })
+
+    // 添加点击事件
+    map.on('click', (event) => {
+      const lat = event.latLng.getLat()
+      const lng = event.latLng.getLng()
+
+      selectedLat.value = lat
+      selectedLng.value = lng
+
+      console.log('选择坐标:', { lng, lat })
+
+      // 更新标记位置
+      updateMarkerPosition()
+
+      // 移动地图中心到点击位置
+      map.setCenter(new window.TMap.LatLng(lat, lng))
+
+      // 显示成功提示
+      ElMessage.success(`已选择坐标: ${lng.toFixed(6)}, ${lat.toFixed(6)}`)
+    })
+
+    // 监听地图移动事件，更新标记位置
+    map.on('moveend', updateMarkerPosition)
+    map.on('zoomend', updateMarkerPosition)
+
+    // 如果有初始坐标，更新标记位置
+    if (props.longitude && props.latitude) {
+      nextTick(() => {
+        updateMarkerPosition()
+      })
+    }
+
+    isMapInitialized = true
+    console.log('腾讯地图初始化成功')
+  } catch (error) {
+    console.error('地图初始化失败:', error)
+    mapError.value = '地图加载失败: ' + error.message
+  } finally {
+    mapLoading.value = false
+  }
+}
+
+// 更新地图中心
+const updateMapCenter = () => {
+  if (map && (props.longitude || props.latitude)) {
+    const center = new window.TMap.LatLng(
+      props.latitude || MAP_CONFIG.DEFAULT_CENTER.latitude,
+      props.longitude || MAP_CONFIG.DEFAULT_CENTER.longitude
+    )
+    map.setCenter(center)
+
+    // 更新标记位置
+    nextTick(() => {
+      updateMarkerPosition()
+    })
+  }
+}
+
+// 手动获取当前位置
+const getCurrentLocationManually = async () => {
+  try {
+    const currentLocation = await getCurrentLocation()
+
+    selectedLat.value = currentLocation.latitude
+    selectedLng.value = currentLocation.longitude
+
+    // 更新地图中心和标记
+    if (map) {
+      const center = new window.TMap.LatLng(currentLocation.latitude, currentLocation.longitude)
+      map.setCenter(center)
+      nextTick(() => {
+        updateMarkerPosition()
+      })
+    }
+
+    ElMessage.success('已获取到当前位置')
+  } catch (error) {
+    console.error('手动获取位置失败:', error)
+    ElMessage.error('获取当前位置失败: ' + error.message)
+  }
+}
+
+// 确认选择
+const confirmSelection = () => {
+  console.log('确认选择按钮被点击')
+  console.log('当前坐标:', { lng: selectedLng.value, lat: selectedLat.value })
+
+  if (selectedLng.value && selectedLat.value) {
+    console.log('发送确认事件:', {
+      longitude: selectedLng.value,
+      latitude: selectedLat.value,
+    })
+
+    emit('confirm', {
+      longitude: selectedLng.value,
+      latitude: selectedLat.value,
+    })
+
+    ElMessage.success('坐标确认成功！')
+    handleClose()
+  } else {
+    console.log('坐标未选择，无法确认')
+    ElMessage.warning('请先选择坐标位置')
+  }
+}
+
+// 对话框打开时
+const handleOpened = () => {
+  console.log('对话框已打开')
+  nextTick(() => {
+    if (!isMapInitialized) {
+      initMap()
+    } else {
+      updateMapCenter()
+    }
+  })
+}
+
+// 关闭对话框
+const handleClose = () => {
+  console.log('关闭对话框')
+  markerPosition.value = null
+  visible.value = false
+}
+
+// 监听props变化，更新选中的坐标
+watch([() => props.longitude, () => props.latitude], ([newLng, newLat]) => {
+  selectedLng.value = newLng
+  selectedLat.value = newLat
+  updateMapCenter()
+})
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (map) {
+    try {
+      map.destroy()
+      map = null
+      isMapInitialized = false
+      console.log('地图实例已清理')
+    } catch (error) {
+      console.warn('清理地图实例失败:', error)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.map-container {
+  position: relative;
+
+  .custom-marker {
+    position: absolute;
+    z-index: 1000;
+    pointer-events: none;
+    transform: translate(-50%, -100%);
+
+    .marker-pin {
+      width: 20px;
+      height: 20px;
+      background: #ff4444;
+      border: 3px solid #ffffff;
+      border-radius: 50%;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 8px solid #ff4444;
+      }
+    }
+
+    .marker-shadow {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 16px;
+      height: 8px;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 50%;
+      margin-top: 2px;
+    }
+  }
+
+  .coordinate-info {
+    margin-top: 16px;
+    padding: 12px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+
+    p {
+      margin: 0;
+      color: #606266;
+      font-size: 14px;
+
+      &.tip {
+        color: #909399;
+        font-size: 12px;
+        margin-top: 4px;
+      }
+
+      &.selected-info {
+        color: #67c23a;
+        font-weight: 500;
+        margin-top: 8px;
+      }
+
+      &.current-location-info {
+        color: #409eff;
+        font-weight: 500;
+        margin-top: 8px;
+      }
+    }
+  }
+
+  .error-info {
+    margin-top: 16px;
+  }
+
+  .native-button-area {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #e4e7ed;
+    text-align: right;
+    position: relative;
+    z-index: 9999;
+
+    button {
+      padding: 8px 16px;
+      border-radius: 4px;
+      border: 1px solid #dcdfe6;
+      background-color: #fff;
+      color: #606266;
+      cursor: pointer;
+      font-size: 14px;
+      margin-left: 8px;
+      position: relative;
+      z-index: 10000;
+
+      &:hover {
+        background-color: #f5f7fa;
+      }
+
+      &.confirm-btn {
+        background-color: #409eff;
+        border-color: #409eff;
+        color: #fff;
+
+        &:hover:not(:disabled) {
+          background-color: #66b1ff;
+          border-color: #66b1ff;
+        }
+
+        &:disabled {
+          background-color: #a0cfff;
+          border-color: #a0cfff;
+          cursor: not-allowed;
+        }
+      }
+
+      &.location-btn {
+        background-color: #67c23a;
+        border-color: #67c23a;
+        color: #fff;
+
+        &:hover:not(:disabled) {
+          background-color: #85ce61;
+          border-color: #85ce61;
+        }
+
+        &:disabled {
+          background-color: #b3e19d;
+          border-color: #b3e19d;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/config/map.js b/src/config/map.js
new file mode 100644
index 0000000..94b1acc
--- /dev/null
+++ b/src/config/map.js
@@ -0,0 +1,19 @@
+// 地图配置
+export const MAP_CONFIG = {
+    // 腾讯地图API密钥 - 请替换为你的实际密钥
+    TENCENT_MAP_KEY: 'HGWBZ-QUB6Z-C7KXZ-TJRCH-IFLLO-AMFIJ',
+
+    // 默认地图中心点（北京）
+    DEFAULT_CENTER: {
+        latitude: 39.916527,
+        longitude: 116.397128
+    },
+
+    // 默认缩放级别
+    DEFAULT_ZOOM: 13
+}
+
+// 注意：
+// 1. 请到腾讯位置服务官网申请API密钥：https://lbs.qq.com/
+// 2. 将上面的 YOUR_TENCENT_MAP_API_KEY 替换为你的实际密钥
+// 3. 在生产环境中，建议将密钥配置在环境变量中
\ No newline at end of file
diff --git a/src/views/BusinessManage/HandleDialog.vue b/src/views/BusinessManage/HandleDialog.vue
index a8c26bf..7d83df6 100644
--- a/src/views/BusinessManage/HandleDialog.vue
+++ b/src/views/BusinessManage/HandleDialog.vue
@@ -1,5 +1,7 @@
 <script setup>
-import RPC from '@/utils/rpc';
+import RPC from '@/utils/rpc'
+import MapSelector from '@/components/MapSelector.vue'
+
 const props = defineProps({
   type: {
     type: String,
@@ -11,20 +13,20 @@ import { VueDraggable } from 'vue-draggable-plus'
 const list = ref([
   {
     name: 'Joao',
-    id: 1
+    id: 1,
   },
   {
     name: 'Jean',
-    id: 2
+    id: 2,
   },
   {
     name: 'Johanna',
-    id: 3
+    id: 3,
   },
   {
     name: 'Juan',
-    id: 4
-  }
+    id: 4,
+  },
 ])
 
 const emit = defineEmits(['closed', 'onSuccess'])
@@ -38,60 +40,82 @@ onMounted(() => {
 })
 
 const formRef = ref(null)
-const formField = ref({
-  color_component: []
-})
-const formRules = reactive({
-
-})
+const formField = ref({})
+const formRules = reactive({})
 
 const loading = ref(false)
+const showMapSelector = ref(false)
 
 function closed() {
   emit('closed')
 }
 
-const submitForm = () => {
+const submitForm = () => {}
 
-}
-
-const detailData = ref([])
 if (!isAdd.value) {
   // formField.value = props.row
 }
 
-
-const add = () => {
-  formField.value.color_component.push({ num: calcId(formField.value.color_component), color_paste_id: '', remark: '', ratio: 0.01 })
+const chooseCoordinates = () => {
+  showMapSelector.value = true
 }
 
-const handleDelete = row => {
-  formField.value.color_component = formField.value.color_component.filter(item => item.num !== row.num)
+// 处理地图坐标选择确认
+const handleCoordinateConfirm = (coordinates) => {
+  console.log('接收到坐标确认事件:', coordinates)
+  formField.value.longitude = coordinates.longitude
+  formField.value.latitude = coordinates.latitude
+  console.log('表单字段已更新:', formField.value)
+  ElMessage.success(`坐标选择成功: 经度 ${coordinates.longitude}, 纬度 ${coordinates.latitude}`)
 }
-
 </script>
 
 <template>
-  <el-dialog align-center :title="isAdd ? '新增' : '修改'" width="774px" v-model="dialogVisible" @closed="closed" :close-on-click-modal="false">
-    <el-form ref="formRef" label-position="right" label-suffix=":" :model="formField" :rules="formRules" v-loading="loading">
-         <VueDraggable ref="el" v-model="list">
+  <el-dialog
+    align-center
+    :title="isAdd ? '新增' : '修改'"
+    width="774px"
+    v-model="dialogVisible"
+    @closed="closed"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-suffix=":"
+      :model="formField"
+      :rules="formRules"
+      v-loading="loading"
+    >
+      <!-- <VueDraggable ref="el" v-model="list">
       <div v-for="item in list" :key="item.id">
         {{ item.name }}
       </div>
-    </VueDraggable>
+    </VueDraggable> -->
+      <el-form-item prop="longitude" label="经度">
+        <el-input-number :controls="false" placeholder="请输入" v-model="formField.longitude" />
+      </el-form-item>
+      <el-form-item prop="latitude" label="纬度">
+        <el-input-number :controls="false" placeholder="请输入" v-model="formField.latitude" />
+      </el-form-item>
+      <el-button type="primary" @click="chooseCoordinates">选择坐标</el-button>
     </el-form>
 
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="closed">
-          取 消
-        </el-button>
-        <el-button type="primary" :loading="loading" @click="submitForm">
-          确 定
-        </el-button>
+        <el-button @click="closed"> 取 消 </el-button>
+        <el-button type="primary" :loading="loading" @click="submitForm"> 确 定 </el-button>
       </div>
     </template>
   </el-dialog>
+
+  <!-- 地图坐标选择器 -->
+  <MapSelector
+    v-model="showMapSelector"
+    :longitude="formField.longitude"
+    :latitude="formField.latitude"
+    @confirm="handleCoordinateConfirm"
+  />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/BusinessManage/index.vue b/src/views/BusinessManage/index.vue
index 42e5424..f65410a 100644
--- a/src/views/BusinessManage/index.vue
+++ b/src/views/BusinessManage/index.vue
@@ -46,7 +46,7 @@
 
         <pagination v-show="total > 0" :total="total" v-model:limit="queryParams.limit" v-model:page="queryParams.page" @pagination="getList" />
 
-        <HandleDialog v-if="isShowDialog" :type="rowType" :colorPasteList="colorPasteList" :row="currentRow" @closed="isShowDialog = false" @on-success="getList" />
+        <HandleDialog v-if="isShowDialog" :type="rowType" :row="currentRow" @closed="isShowDialog = false" @on-success="getList" />
     </div>
 </template>
 
diff --git a/src/views/CustomerManage/index.vue b/src/views/CustomerManage/index.vue
index f62d5c5..959c938 100644
--- a/src/views/CustomerManage/index.vue
+++ b/src/views/CustomerManage/index.vue
@@ -53,7 +53,7 @@
 
         <pagination v-show="total > 0" :total="total" v-model:limit="queryParams.limit" v-model:page="queryParams.page" @pagination="getList" />
 
-        <HandleDialog v-if="isShowDialog" :type="rowType" :colorPasteList="colorPasteList" :row="currentRow" @closed="isShowDialog = false" @on-success="getList" />
+        <HandleDialog v-if="isShowDialog" :type="rowType" :row="currentRow" @closed="isShowDialog = false" @on-success="getList" />
     </div>
 </template>