# AmapDisplay 高德地图组件

## 功能特性

- 基础地图显示
- 位置标记
- **路线规划与绘制**（新增功能）
- 深色主题支持
- 响应式设计

## 路线绘制功能

### 新增的 Props 参数

| 参数名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `startPoint` | Object | `{ lng: 121.265276, lat: 31.375566 }` | 起点坐标 |
| `endPoint` | Object | `{ lng: 121.275276, lat: 31.385566 }` | 终点坐标 |
| `routeType` | String | `'driving'` | 路线类型：`driving`(驾车)、`walking`(步行)、`transit`(公交)、`bicycling`(骑行) |
| `showRoute` | Boolean | `false` | 是否显示路线 |
| `routeStyle` | Object | `{ strokeColor: '#1890ff', strokeWeight: 6, strokeOpacity: 0.8 }` | 路线样式 |

### 使用示例

```vue
<template>
  <AmapDisplay
    :mapDisplay="true"
    :center="{ lng: 121.265276, lat: 31.375566 }"
    :startPoint="{ lng: 121.265276, lat: 31.375566 }"
    :endPoint="{ lng: 121.275276, lat: 31.385566 }"
    :routeType="'driving'"
    :showRoute="true"
    :routeStyle="{ strokeColor: '#52c41a', strokeWeight: 8, strokeOpacity: 0.9 }"
  />
</template>
```

### 路线信息显示

组件会自动显示：
- 总距离（公里）
- 预计时间（分钟）
- 详细路线步骤

### 控制按钮

- **加载地图**：初始化地图
- **绘制路线**：根据起点和终点绘制路线
- **清除路线**：清除当前显示的路线

### 错误处理

如果路线规划失败，组件会自动：
1. 显示起点和终点标记
2. 绘制直线连接
3. 计算直线距离
4. 显示错误提示

### 注意事项

1. **高德地图SDK要求**：确保已加载高德地图JavaScript API
2. **坐标格式**：使用高德地图坐标系（GCJ-02）
3. **网络要求**：路线规划需要网络连接
4. **API限制**：注意高德地图API的使用限制和配额

### 兼容性

- 支持高德地图JavaScript API v1.4+
- 自动降级处理：如果路径规划失败，会显示直线连接
- 使用数字常量避免版本兼容性问题

### 样式自定义

可以通过 `routeStyle` 属性自定义路线样式：

```javascript
:routeStyle="{
  strokeColor: '#ff4d4f',    // 路线颜色
  strokeWeight: 8,           // 路线宽度
  strokeOpacity: 0.8         // 路线透明度
}"
```

### 事件监听

组件会自动监听以下props变化：
- `startPoint`：起点变化时重新绘制路线
- `endPoint`：终点变化时重新绘制路线
- `showRoute`：显示/隐藏路线
- `routeType`：路线类型变化时重新计算

## 完整示例

```vue
<template>
  <div class="map-demo">
    <AmapDisplay
      :mapDisplay="true"
      :center="mapCenter"
      :startPoint="startPoint"
      :endPoint="endPoint"
      :routeType="routeType"
      :showRoute="showRoute"
      :routeStyle="routeStyle"
    />
    
    <div class="controls">
      <button @click="toggleRoute">
        {{ showRoute ? '隐藏路线' : '显示路线' }}
      </button>
      <select v-model="routeType">
        <option value="driving">驾车</option>
        <option value="walking">步行</option>
        <option value="transit">公交</option>
        <option value="bicycling">骑行</option>
      </select>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AmapDisplay from '@/components/AmapDisplay/index.vue';

const mapCenter = ref({ lng: 121.265276, lat: 31.375566 });
const startPoint = ref({ lng: 121.265276, lat: 31.375566 });
const endPoint = ref({ lng: 121.275276, lat: 31.385566 });
const routeType = ref('driving');
const showRoute = ref(false);
const routeStyle = ref({
  strokeColor: '#1890ff',
  strokeWeight: 6,
  strokeOpacity: 0.8
});

const toggleRoute = () => {
  showRoute.value = !showRoute.value;
};
</script>
```
