|
|
|
|
|
# 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端已经实现了：
|
|
|
|
|
|
- ✅ 点位列表显示
|
|
|
|
|
|
- ✅ 点击跳转腾讯地图导航
|
|
|
|
|
|
- ✅ 定位失败时的降级处理
|
|
|
|
|
|
- ✅ 即使定位失败也能加载点位数据
|
|
|
|
|
|
|
|
|
|
|
|
如果需要显示真正的地图，请按照上述方案一进行配置。
|
|
|
|
|
|
|
