# H5端地图显示说明

## 当前状态
目前H5端使用的是**列表形式**显示点位，点击点位可以跳转到腾讯地图进行导航。

## uni-app map组件在H5端的支持情况

**✅ 可以直接使用！** uni-app的`<map>`组件在H5端是支持的，但需要注意：

1. **默认使用高德地图** - uni-app的map组件在H5端默认使用高德地图服务
2. **需要配置高德地图Key** - 必须在manifest.json中配置高德地图的Web端API Key
3. **功能限制** - 某些小程序特有的功能（如cover-view）在H5端不支持

## 如果要显示真正的地图，有以下方案：

### 方案一：使用uni-app的map组件 + 高德地图（最简单）⭐推荐

#### 优点：
- 代码改动最小
- 与小程序端代码统一
- uni-app官方支持

#### 缺点：
- 需要使用高德地图（不是腾讯地图）
- 某些高级功能可能受限

#### 配置步骤：

1. **申请高德地图Web端API Key**
   - 访问：https://console.amap.com/dev
   - 注册/登录账号
   - 创建应用，选择"Web端 (JS API)"
   - 获取API Key
   - 配置域名白名单

2. **配置manifest.json**
   ```json
   {
     "h5": {
       "sdkConfigs": {
         "maps": {
           "amap": {
             "webKey": "你的高德地图Web端API Key"
           }
         }
       }
     }
   }
   ```

3. **修改pages/home/home.vue**
   - 移除H5端的条件编译`#ifndef H5`
   - 让map组件在H5端也显示
   - 注意：cover-view在H5端不支持，需要改为普通view

#### 示例代码：
```vue
<template>
  <view class="maps">
    <!-- 移除 #ifndef H5，让map组件在H5端也显示 -->
    <map 
      id="myMap" 
      :longitude="lng" 
      :latitude="lat" 
      :markers="markers"
      :scale="scale"
      show-location
      @markertap="showDetail"
    >
      <!-- H5端不支持cover-view，需要改为view -->
      <!-- #ifndef H5 -->
      <cover-view>...</cover-view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view>...</view>
      <!-- #endif -->
    </map>
  </view>
</template>
```

---

### 方案二：使用腾讯地图Web SDK

#### 1. 获取腾讯地图Key
- 访问：https://lbs.qq.com/
- 注册/登录账号
- 创建应用，获取Key
- 配置域名白名单（你的H5域名）

#### 2. 配置manifest.json
在 `manifest.json` 的 `h5.sdkConfigs.maps.qqmap.key` 中填入你的Key：
```json
{
  "h5": {
    "sdkConfigs": {
      "maps": {
        "qqmap": {
          "key": "你的腾讯地图Key"
        }
      }
    }
  }
}
```

#### 3. 引入腾讯地图SDK
在 `pages/home/home.vue` 的H5端部分引入：
```html
<!-- #ifdef H5 -->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的Key"></script>
<!-- #endif -->
```

#### 4. 使用地图组件
可以使用 `<map>` 组件（uni-app支持）或直接使用腾讯地图Web API创建地图实例。

---

### 方案二：使用iframe嵌入腾讯地图

#### 优点：
- 不需要Key（使用URL scheme）
- 实现简单

#### 缺点：
- 交互受限
- 无法自定义样式

#### 实现方式：
在H5端使用iframe嵌入腾讯地图URL，类似当前的点位导航URL。

---

### 方案三：使用其他地图SDK

#### 高德地图
- 访问：https://lbs.amap.com/
- 获取Key
- 引入高德地图JS API

#### 百度地图
- 访问：https://lbsyun.baidu.com/
- 获取Key
- 引入百度地图JS API

---

## 定位失败问题

### 错误：`getLocation:fail network error`

#### 常见原因：
1. **非HTTPS环境** - H5定位功能必须使用HTTPS协议
2. **用户拒绝授权** - 浏览器定位权限被拒绝
3. **网络问题** - 网络连接不稳定
4. **浏览器不支持** - 某些浏览器不支持定位API

#### 解决方案：
1. **确保使用HTTPS** - 部署到HTTPS域名
2. **引导用户授权** - 提示用户在浏览器设置中允许定位权限
3. **使用默认位置** - 定位失败时使用默认坐标（如苏州市中心）
4. **降级处理** - 定位失败时仍显示点位列表（不计算距离）

---

## 当前实现

目前H5端已经实现了：
- ✅ 点位列表显示
- ✅ 点击跳转腾讯地图导航
- ✅ 定位失败时的降级处理
- ✅ 即使定位失败也能加载点位数据

如果需要显示真正的地图，请按照上述方案一进行配置。