# 百度地图组件使用说明

## 概述
新的百度地图组件基于 `vue-baidu-map-3x` 第三方库重新实现，解决了原组件地图加载不稳定的问题。

## 功能特性
- ✅ 刷新按钮：重新加载设备坐标点数据
- ✅ 定位按钮：定位到用户当前位置
- ✅ 地图缩放：支持滚轮缩放、双击缩放
- ✅ 地图拖拽：支持鼠标拖拽移动地图
- ✅ 用户位置标记：蓝色圆点显示用户当前位置
- ✅ 设备位置标记：红色定位图标显示设备位置
- ✅ 信息窗口：点击标记显示详细信息

## 技术实现

### 依赖库
```bash
npm install vue-baidu-map-3x --save
```

### 主要组件
- `BaiduMap`: 主地图组件
- `BmMarker`: 地图标记点
- `BmInfoWindow`: 信息窗口
- `BmNavigation`: 导航控件
- `BmScale`: 比例尺控件

### 配置说明
地图配置在 `src/config/map.js` 中：
```javascript
export const MAP_CONFIG = {
  BAIDU_MAP_AK: 'C9EWnSi2zo26SsYWvIvZ6r7SgO2WU4dt', // 百度地图API密钥
  DEFAULT_ZOOM: 12, // 默认缩放级别
  MAP_OPTIONS: {
    enableScrollWheelZoom: true,  // 启用滚轮缩放
    enableDragging: true,         // 启用拖拽
    enableDoubleClickZoom: true,  // 启用双击缩放
    enableKeyboard: true          // 启用键盘操作
  }
}
```

## API 接口
设备坐标数据通过以下接口获取：
- **接口地址**: `/device/device/getDeviceCoordinate`
- **请求方法**: GET
- **响应格式**:
```json
[
  {
    "name": "jsfb-75925E",
    "lng": 112.555042,
    "lat": 33.003268
  },
  {
    "name": "jsfb-B76DFB", 
    "lng": 113.558044,
    "lat": 22.144445
  }
]
```

## 使用方法

### 1. 在 main.js 中注册组件
```javascript
import BaiduMap from 'vue-baidu-map-3x'
app.use(BaiduMap)
```

### 2. 在页面中使用
```vue
<template>
  <DeviceMap />
</template>

<script setup>
import DeviceMap from './components/DeviceMap.vue'
</script>
```

## 默认行为
- 地图默认中心为用户当前位置，获取失败时使用深圳坐标 (114.06, 22.54)
- 默认缩放级别为 12
- 自动加载设备坐标数据并在地图上显示标记
- 用户位置使用蓝色圆点标记，设备位置使用红色定位图标

## 响应式支持
- 支持移动端适配
- 在小屏幕设备上自动调整地图高度和按钮布局

## 故障排除
1. **地图不显示**: 检查百度地图 API 密钥是否正确
2. **定位失败**: 检查浏览器位置权限设置
3. **设备标记不显示**: 检查设备坐标数据接口是否正常返回数据
