LBS 场景推荐

本文档展示了如何结合 expo-gaode-map（核心渲染）和 expo-gaode-map-web-api（数据服务）来实现常见的业务场景。

🏗 组件职责分工

在阅读功能列表前，请先理解两个组件的角色：

• 📱 expo-gaode-map (Core)

  • 角色：前端渲染层（View）
  • 职责：显示地图、定位、绘制标记/线条、处理手势交互。
  • 特点：原生性能，所见即所得。

• ☁️ expo-gaode-map-web-api (Web API)

  • 角色：后端数据层（Model/Service）
  • 职责：地理编码、路径规划算法、POI 数据搜索、输入提示。
  • 特点：纯 JS 实现，负责逻辑计算与数据获取。

---

🚀 核心场景推荐

1. 📍 定位与地址解析 (Location & Geocoding)

基础 LBS 能力，适用于几乎所有地图应用。

功能名称	流程逻辑 (Core + Web API)	应用场景
精准定位与展示	Core 获取经纬度 -> Core 移动视角并显示蓝点	打车/外卖 App 首页
逆地理编码 (ReGeocode)	Core 获取坐标 -> Web API 解析为中文地址("朝阳区...") -> UI 显示	朋友圈定位、签到、上车点确认
地理编码 (Geocode)	用户输入地址文字 -> Web API 解析为坐标 -> Core 跳转并标记	地址选点、目的地输入
拖拽选点	Core 显示中心固定 Marker -> 用户拖动地图 -> Web API 实时解析中心点地址	叫车起点微调、外卖地址修改

2. 🔍 搜索与发现 (Search & POI)

利用高德海量 POI 数据进行地点检索。

功能名称	流程逻辑 (Core + Web API)	应用场景
关键字搜索	用户输入关键字 -> Web API 返回 POI 列表 -> Core 在地图上撒点	找餐厅、找酒店
周边搜索 (Around)	Core 获取当前中心点 -> Web API 搜"加油站" -> Core 渲染结果	附近设施查询
输入提示 (Input Tips)	用户输入"万" -> Web API 实时返回"万达、万科..."列表 -> 点击后 Core 跳转	搜索框联想优化
多边形区域搜索	Core 绘制 Polygon 区域 -> Web API 搜索该区域内的 POI	找特定商圈内的房源

3. 🚗 路径规划与导航 (Routing)

Web API 负责"怎么走"，Core 负责"画出来"。

功能名称	流程逻辑 (Core + Web API)	应用场景
驾车路线规划	Web API 计算路线(含避堵策略) -> Core 绘制 Polyline 轨迹	网约车行程预览
多策略对比	Web API 返回3条路线(最快/最短/省钱) -> Core 绘制3条不同颜色线条	用户选路
路况可视化	Web API 返回路况数据 -> Core 用 红/黄/绿 分段绘制线条	拥堵情况展示
公交/地铁规划	Web API 计算换乘方案 -> Core 绘制分段轨迹(步行虚线/公交实线)	城市公共交通出行
步行/骑行规划	Web API 计算短途路线 -> Core 绘制轨迹并显示关键转弯点	最后一公里导航

4. 🗺️ 高级数据可视化 (Visualization)

处理大量数据或特定业务数据的展示。

功能名称	流程逻辑 (Core + Web API)	应用场景
海量点聚合 (Cluster)	Web API 获取全市 5000+ 数据 -> Core 使用 Cluster 组件聚合显示	共享单车、房产中介
热力图 (HeatMap)	Web API 获取人流量数据 -> Core 渲染热力图层	景区监控、商业选址
电子围栏/服务区	Web API 获取行政区边界 -> Core 绘制 Polygon 多边形	配送范围、禁飞区展示
轨迹回放	后端记录坐标串 -> Core 动态移动 Marker 并绘制已走过的轨迹	跑步记录、车辆追踪

5. 🏢 行业垂直场景 (Industry Solutions)

针对特定行业的深度应用。

功能名称	流程逻辑 (Core + Web API)	应用场景
房产/学区可视化	Web API 搜索"小学" -> Core 绘制学校位置 + Core 绘制学区范围 Polygon	房产中介 App
物流多点排线	Web API 批量算路(TSP问题) -> Core 绘制最优配送顺序轨迹	快递/外卖配送员端
网格化管理	Web API 获取行政区边界 -> Core 绘制网格 Polygon + 不同颜色表示状态	智慧城市/城管
位置签到打卡	Core 获取定位 + Web API 逆地理编码 + Web API 判断是否在 Polygon 范围内	办公考勤、外勤管理

6. 🎨 交互体验增强 (UX Enhancement)

提升用户操作地图的细腻体验。

功能名称	流程逻辑 (Core + Web API)	应用场景
平滑移动 Marker	Web API 返回车辆新坐标 -> Core 使用 Camera 或 Marker 动画 API 平滑移动图标	车辆实时追踪
动态缩放视野	Web API 返回搜索结果列表 -> Core 计算所有点的边界 -> 自动缩放地图以包含所有点	搜索结果展示
自定义信息窗体	点击 Marker -> Core 弹出的 Callout 中展示由 Web API 获取的实时数据(如排队人数)	热门餐厅查看

7. 🛠 辅助工具 (Utilities)

利用地图数据进行的辅助计算。

功能名称	流程逻辑 (Core + Web API)	应用场景
距离测量工具	Core 记录用户点击的多个坐标点 -> 几何计算或 Web API 算路 -> UI 显示总长度	户外运动规划
面积测量工具	Core 记录用户点击构成的多边形 -> 几何计算面积 -> UI 显示	土地测量、装修估算

---

💡 最佳实践示例：打车 App

以下是一个简化的打车 App 核心流程示例代码：

// 1. 获取定位
const location = await ExpoGaodeMapModule.getCurrentLocation();

// 2. 逆地理编码（显示当前位置名称）
const regeo = await api.geocode.regeocode({
  latitude: location.latitude,
  longitude: location.longitude
});
console.log("当前位置:", regeo.regeocode.formatted_address);

// 3. 搜索目的地
const pois = await api.poi.search("北京西站", { city: "北京" });
const destination = pois.pois[0];

// 4. 路径规划（驾车）
const route = await api.route.driving(
  `${location.longitude},${location.latitude}`,
  `${destination.location}`,
  { strategy: DrivingStrategy.AVOID_JAM, show_fields: 'polyline,cost' }
);

// 5. 渲染地图
return (
  <MapView>
    {/* 起点 */}
    <Marker position={location} title="我的位置" />
    
    {/* 终点 */}
    <Marker 
      position={{
        latitude: parseFloat(destination.location.split(',')[1]), 
        longitude: parseFloat(destination.location.split(',')[0])
      }} 
      title={destination.name} 
    />
    
    {/* 路线 */}
    <Polyline 
      points={parseRoutePolyline(route.route.paths[0].steps)} 
      strokeColor="#0091FF" 
      strokeWidth={6} 
    />
  </MapView>
);