# 地图展示组件

地图展示组件，支持传入地理坐标或位置名称来展示地图区域，并标注当前位置。

## 功能特性

- ✅ 支持通过经纬度坐标定位
- ✅ 支持通过地址名称定位（自动地理编码）
- ✅ 支持自定义缩放级别
- ✅ 支持自定义标记点标题
- ✅ 支持点击标记查看详细地址
- ✅ 支持自定义地图高度
- ✅ 响应式设计，适配移动端
- ✅ 优雅的加载和错误状态提示

## 使用方式

### 1. 通过经纬度定位

```tsx
<MapWidget
  longitude={116.397428}
  latitude={39.90923}
  markerTitle="北京天安门"
  zoom={15}
  height={400}
/>
```

### 2. 通过地址名称定位

```tsx
<MapWidget
  locationName="北京市天安门广场"
  markerTitle="天安门广场"
  zoom={15}
  height={400}
/>
```

## 属性说明

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| longitude | number | 116.397428 | 经度（-180 到 180）|
| latitude | number | 39.90923 | 纬度（-90 到 90）|
| locationName | string | - | 位置名称（优先级高于经纬度）|
| zoom | number | 14 | 地图缩放级别（3-18）|
| markerTitle | string | '当前位置' | 标记点标题 |
| height | number | 400 | 地图容器高度（像素）|

## 注意事项

1. **地图脚本配置**：
   - 当前使用的是企业内部部署的高德地图脚本：`https://amisrs.ingageapp.com/base/js/amap_2.0.5.21.js`
   - 参考了 `amis-ui-component-web` 项目的实现方式
   - 如需使用高德官方 API，可以：
     - 前往[高德开放平台](https://lbs.amap.com/)申请 Web 端 API Key
     - 在 `index.tsx` 的 `loadAMapScript` 方法中取消注释备用方案代码
     - 替换 `amapKey` 为你的 API Key

2. **定位方式优先级**：
   - 如果同时提供了 `locationName` 和经纬度，优先使用 `locationName`
   - 如果都未提供，默认显示北京天安门位置

3. **地理编码说明**：
   - 使用 `locationName` 时，会自动调用高德地图的地理编码服务
   - 建议提供完整的地址信息以提高解析准确度
   - 地理编码仅支持中国大陆地区

4. **性能优化**：
   - 地图脚本采用动态加载方式，不会影响页面初始加载速度
   - 地图实例在组件销毁时会自动清理，避免内存泄漏
   - 已加载的脚本会被缓存，重复使用不会重复加载

## 示例场景

### 场景1：展示公司地址
```tsx
<MapWidget
  locationName="上海市浦东新区世纪大道XXX号"
  markerTitle="公司总部"
  zoom={16}
  height={500}
/>
```

### 场景2：展示多个城市坐标
```tsx
// 北京
<MapWidget longitude={116.397428} latitude={39.90923} markerTitle="北京" />

// 上海
<MapWidget longitude={121.473701} latitude={31.230416} markerTitle="上海" />

// 深圳
<MapWidget longitude={114.057868} latitude={22.543099} markerTitle="深圳" />
```

### 场景3：移动端展示
组件已自动适配移动端，会根据屏幕尺寸调整样式和布局。

## 技术实现

- 基于高德地图 Web API 2.0
- 使用 React Class Component
- TypeScript 类型支持
- SCSS 样式预处理
- 动态脚本加载

## 浏览器兼容性

- Chrome >= 60
- Firefox >= 60
- Safari >= 11
- Edge >= 79

## 更新日志

### v1.0.0 (2025-10-17)
- ✨ 初始版本发布
- ✨ 支持经纬度和地址名称定位
- ✨ 支持标记点和信息窗体
- ✨ 响应式设计