一、组件核心功能与适用场景

1. 核心功能：支持关键词搜索地址、地图可视化展示、单选地址确认、获取经纬度 + 详细地址
2. 技术场景：uni-app 多端项目（H5 为主）、海外地址选址、需要结合原生地图 API 的交互场景
3. 核心亮点：使用 renderjs 解决 uni-app 跨端操作 DOM / 加载第三方 SDK 问题、Google Place API + 逆地理编码 API 双接口联动

二、前置依赖与环境准备

1. 开发框架：uni-app（H5 端优先）
2. 核心服务：Google Maps API Key（开启 Places API、Geocoding API、Maps JavaScript API）
3. 语言支持：支持中英文切换（可扩展多语言）
4. 权限要求：开启设备地理定位权限、网络权限

三、组件整体架构设计

1. 三层架构拆分

1. 视图层（template）：地图容器 + 搜索框 + 地址列表 + 操作按钮
2. 逻辑层（script）：数据驱动、API 请求、事件交互、父子组件通信
3. 渲染层（renderjs）：Google Maps SDK 加载、地图初始化、DOM 操作、地图联动

2. 核心数据流

搜索关键词 → Place API 搜索地址 → 列表渲染 → 单选选中 → 地图定位 → 确认获取经纬度 + 地址信息

四、核心代码模块拆解（无 CSS 版）

1. 模板结构（template）

2. 业务逻辑层（script）

3. 渲染层（renderjs）

核心功能：加载 Google Maps SDK、初始化地图、获取定位、监听数据更新地图

3. 组件运用