4.2 KiB

Raw Permalink Blame History Unescape Escape

H5端地图显示说明

当前状态

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

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

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

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

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

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

优点：

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

缺点：

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

配置步骤：

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

配置manifest.json

{
  "h5": {
    "sdkConfigs": {
      "maps": {
        "amap": {
          "webKey": "你的高德地图Web端API Key"
        }
      }
    }
  }
}

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

示例代码：

<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：

{
  "h5": {
    "sdkConfigs": {
      "maps": {
        "qqmap": {
          "key": "你的腾讯地图Key"
        }
      }
    }
  }
}

3. 引入腾讯地图SDK

在 pages/home/home.vue 的H5端部分引入：

<!-- #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`

常见原因：

非HTTPS环境 - H5定位功能必须使用HTTPS协议
用户拒绝授权 - 浏览器定位权限被拒绝
网络问题 - 网络连接不稳定
浏览器不支持 - 某些浏览器不支持定位API

解决方案：

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

当前实现

目前H5端已经实现了：

✅ 点位列表显示
✅ 点击跳转腾讯地图导航
✅ 定位失败时的降级处理
✅ 即使定位失败也能加载点位数据

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

4.2 KiB Raw Permalink Blame History Unescape Escape