# 地图组件快速使用指南

## 快速开始

### 1. 基本使用（经纬度定位）

```tsx
import MapWidget from './components/map-widget';

// 在你的页面或组件中使用
<MapWidget
  longitude={116.397428}
  latitude={39.90923}
  markerTitle="北京天安门"
  zoom={15}
  height={400}
/>
```

### 2. 使用地址名称定位

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

### 3. 在 Amis 平台中使用

在 Amis 低代码平台的页面编辑器中：

1. 从左侧组件面板找到「地图组件」
2. 拖拽到页面中
3. 在右侧属性面板配置：
   - **位置名称**：输入地址（如"上海市浦东新区世纪大道"）
   - **或使用经纬度**：
     - 经度：如 121.473701
     - 纬度：如 31.230416
   - **标记点标题**：设置标记点显示的文字
   - **缩放级别**：3-18，推荐 14-16
   - **地图高度**：默认 400px，可自定义

## 常用城市坐标

| 城市 | 经度 | 纬度 |
|------|------|------|
| 北京 | 116.397428 | 39.90923 |
| 上海 | 121.473701 | 31.230416 |
| 广州 | 113.264385 | 23.129112 |
| 深圳 | 114.057868 | 22.543099 |
| 杭州 | 120.155070 | 30.274084 |
| 成都 | 104.065735 | 30.659462 |
| 西安 | 108.948024 | 34.263161 |
| 武汉 | 114.298572 | 30.584355 |
| 南京 | 118.767413 | 32.041544 |
| 重庆 | 106.504962 | 29.533155 |

## 配置说明

### 优先级规则

1. 如果同时设置了「位置名称」和「经纬度」，优先使用「位置名称」
2. 如果都未设置，默认显示北京天安门

### 地址搜索提示

使用「位置名称」进行定位时，建议提供完整地址以提高准确度：

✅ **好的示例**：
- "北京市朝阳区建国门外大街1号"
- "上海市浦东新区世纪大道88号"
- "广州市天河区珠江新城花城大道"

❌ **不好的示例**：
- "建国门" （太模糊）
- "天河" （太宽泛）
- "世纪大道" （没有城市信息）

### 缩放级别参考

- **3-7**：省级/国家级视图
- **8-11**：城市级视图
- **12-14**：区县级视图（默认）
- **15-16**：街道级视图
- **17-18**：建筑物级视图

## 常见问题

### Q1: 地图无法显示？

**可能原因**：
1. 网络连接问题
2. 地图脚本加载失败
3. 提供的地址无法解析

**解决方案**：
- 检查网络连接
- 查看浏览器控制台错误信息
- 尝试使用经纬度而不是地址名称
- 确认地址格式正确

### Q2: 地址定位不准确？

**解决方案**：
- 提供更完整的地址信息
- 包含省市区县信息
- 使用标准地址格式
- 或直接使用经纬度坐标

### Q3: 如何获取某个地点的经纬度？

**方法**：
1. 访问 [高德地图坐标拾取器](https://lbs.amap.com/tools/picker)
2. 搜索或点击地图上的位置
3. 复制显示的经纬度坐标
4. 注意：高德地图的顺序是 [经度, 纬度]

### Q4: 支持国外地址吗？

**说明**：
- 当前使用高德地图，主要支持中国大陆地区
- 国外地址可能无法准确定位
- 如需支持国外地址，需要切换到谷歌地图或其他国际地图服务

## 进阶使用

### 动态更新位置

如果需要根据用户输入或数据动态更新地图位置，可以通过修改组件的 props 来实现：

```tsx
class MyPage extends React.Component {
  state = {
    longitude: 116.397428,
    latitude: 39.90923,
  };

  updateLocation = (lng, lat) => {
    this.setState({
      longitude: lng,
      latitude: lat,
    });
  };

  render() {
    return (
      <div>
        <button onClick={() => this.updateLocation(121.473701, 31.230416)}>
          定位到上海
        </button>
        <MapWidget
          longitude={this.state.longitude}
          latitude={this.state.latitude}
          markerTitle="当前位置"
          zoom={15}
        />
      </div>
    );
  }
}
```

### 自定义地图样式

如果需要自定义地图的外观，可以修改 `style.scss` 文件：

```scss
// 修改标题栏颜色
.map-widget-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  // 改为你喜欢的颜色
}

// 修改信息窗体样式
.map-info-window {
  padding: 12px;
  // 自定义样式
}
```

## 技术支持

如有问题，请参考：
- [高德地图 Web API 文档](https://lbs.amap.com/api/javascript-api/summary)
- [React 组件开发文档](https://react.docschina.org/)
- [TypeScript 手册](https://www.typescriptlang.org/docs/)