smart-crop-ui/src/MAP_SDK_FIX_COMPLETE_GUIDE.md

高德地图SDK加载与地图选点功能集成 - 完整修复指南

📌 问题分析

您的FieldSpatialQuery.tsx文件约1900行，包含两套重复的代码结构：

1. 页面主体部分：几何计算代码（较早部分）
2. 对话框部分（第1457-1914行）：几何计算对话框中的代码

现状

• ✅ 高德地图SDK已加载（第79-93行）
• ✅ MapPointPicker组件已创建（/components/field/MapPointPicker.tsx）
• ✅ 面积计算Tab已集成地图选点功能
• ✅ 周长计算Tab已集成地图选点功能
• ❌ 中心点计算Tab需要集成
• ❌ 距离计算Tab需要集成
• ❌ 包围盒计算Tab需要集成

🔧 修复步骤

方法1：使用编辑器手动修改（推荐）

由于文件包含重复代码，自动化工具无法精确定位。请使用您的代码编辑器按以下步骤手动修改：

步骤1：定位对话框中的代码

在文件中搜索以下标识来确定您在对话框内：

{/* 几何计算对话框 */}
<Dialog open={showGeometryDialog} onOpenChange={setShowGeometryDialog}>

这应该在第1456-1457行附近。

步骤2：修改中心点计算Tab（约第1692-1750行）

查找以下代码：

            {/* 中心点计算 */}
            <TabsContent value="centroid" className="space-y-4">
              <Card className="p-6">
                <h3 className="mb-4">多边形坐标点</h3>

完整替换为（参考/TEMP_DIALOG_TABS_FIX.txt文件的第1-89行）：

• 添加地图选点和手动输入切换按钮
• 使用 MapPointPicker 组件
• 保留原有的输入框作为备选

步骤3：修改距离计算Tab（约第1754-1836行）

查找以下代码：

            {/* 距离计算 */}
            <TabsContent value="distance" className="space-y-4">
              <Card className="p-6">
                <h3 className="mb-4">两点坐标</h3>

完整替换为（参考/TEMP_DIALOG_TABS_FIX.txt文件的第91-268行）：

• 添加地图选点功能，支持分别选择点1和点2
• 提供切换按钮在点1和点2之间切换
• 使用 MapPointPicker 的 single 模式

步骤4：修改包围盒计算Tab（约第1840-1910行）

查找以下代码：

            {/* 包围盒计算 */}
            <TabsContent value="bbox" className="space-y-4">
              <Card className="p-6">
                <h3 className="mb-4">多边形坐标点</h3>

完整替换为（参考/TEMP_DIALOG_TABS_FIX.txt文件的第270-383行）：

• 添加地图选点和手动输入切换按钮
• 使用 MapPointPicker 组件
• 与中心点计算类似的结构

方法2：使用提供的完整代码

完整的修改后代码已保存在/TEMP_DIALOG_TABS_FIX.txt文件中。

您可以：

1. 打开 /components/field/FieldSpatialQuery.tsx
2. 找到对话框中的三个Tab（中心点、距离、包围盒）
3. 用/TEMP_DIALOG_TABS_FIX.txt中的对应代码替换

✅ 验证步骤

修改完成后，请按以下步骤验证：

1. 刷新应用

# 确保开发服务器正在运行
# 刷新浏览器页面

2. 测试中心点计算

1. 导航到：地块信息管理 > 空间数据管理
2. 点击"几何计算演示"按钮打开对话框
3. 切换到"中心点"Tab
4. 应该看到两个按钮："地图选点"和"手动输入坐标"
5. 点击"地图选点"，应该显示地图组件
6. 在地图上点击可以添加多边形顶点
7. 点击"计算中心点"按钮，验证计算功能正常

3. 测试距离计算

1. 切换到"距离"Tab
2. 点击"地图选点"按钮
3. 应该看到提示"当前模式：选择点1坐标"
4. 在地图上点击选择点1
5. 点击"选择点2"按钮切换模式
6. 在地图上点击选择点2
7. 点击"计算距离"按钮，验证计算功能正常

4. 测试包围盒计算

1. 切换到"包围盒"Tab
2. 点击"地图选点"按钮
3. 在地图上点击添加多边形顶点
4. 点击"计算包围盒"按钮，验证计算功能正常

5. 检查控制台

打开浏览器开发者工具（F12），检查：

• ✅ 应该看到"✅ 高德地图SDK加载成功"的日志
• ❌ 不应该有"高德地图SDK未加载"的警告
• ❌ 不应该有任何 JavaScript 错误

🎯 关键要点

MapPointPicker 组件使用

多边形模式（用于中心点和包围盒）：

<MapPointPicker
  points={geomPoints}
  mode="polygon"
  onPointsChange={setGeomPoints}
  height="400px"
  title="在地图上选择多边形顶点"
/>

单点模式（用于距离计算的两个点）：

<MapPointPicker
  points={[distPoint1]}  // 或 [distPoint2]
  mode="single"
  onPointsChange={(points) => {
    if (points.length > 0) {
      setDistPoint1(points[0]);  // 或 setDistPoint2
    }
  }}
  height="400px"
  title="在地图上选择点1位置"
/>

地图选点模式状态

// mapPickMode 的可能值：
'polygon'      // 多边形选点（用于中心点、包围盒、面积、周长）
'distance-p1'  // 距离计算-点1
'distance-p2'  // 距离计算-点2
null           // 手动输入模式

🐛 常见问题

问题1：地图不显示

原因：高德地图SDK未加载完成 解决：等待几秒，SDK在后台加载中

问题2：点击地图没有反应

原因：可能处于手动输入模式 解决：点击"地图选点"按钮切换模式

问题3："高德地图SDK未加载"警告

原因：SDK加载较慢或加载失败 解决：

1. 检查网络连接
2. 查看 /lib/mapLoader.ts 中的 API Key 是否正确
3. 刷新页面重新加载

📁 相关文件

• /components/field/FieldSpatialQuery.tsx - 主文件（需要修改）
• /components/field/MapPointPicker.tsx - 地图选点组件（已完成）
• /lib/mapLoader.ts - 地图SDK加载器（已完成）
• /TEMP_DIALOG_TABS_FIX.txt - 修改后的完整代码

🎉 完成后

所有3个Tab（中心点、距离、包围盒）集成地图选点功能后：

1. ✅ 删除 /GEOMETRY_MAP_INTEGRATION_MANUAL_FIX.md
2. ✅ 删除 /TEMP_DIALOG_TABS_FIX.txt
3. ✅ 删除本文件 /MAP_SDK_FIX_COMPLETE_GUIDE.md
4. ✅ 更新相关文档记录功能完成状态

---

修改时间: 2025-10-18 状态: 等待手动修复 预计修复时间: 10-15分钟