88 lines
1.9 KiB
Markdown
88 lines
1.9 KiB
Markdown
# 腾讯地图集成说明
|
||
|
||
## 配置步骤
|
||
|
||
### 1. 获取腾讯地图 Key
|
||
|
||
1. 访问 [腾讯位置服务](https://lbs.qq.com/)
|
||
2. 注册并登录账号
|
||
3. 进入控制台 -> 应用管理 -> 我的应用
|
||
4. 创建应用并添加 Key
|
||
5. 选择产品类型：
|
||
- **H5**: WebServiceAPI
|
||
- **微信小程序**: 微信小程序
|
||
- **App**: 移动应用
|
||
|
||
### 2. 配置 Key
|
||
|
||
在 `src/manifest.json` 中配置：
|
||
|
||
```json
|
||
{
|
||
"h5": {
|
||
"sdkConfigs": {
|
||
"maps": {
|
||
"qqmap": {
|
||
"key": "YOUR_TENCENT_MAP_KEY"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"mp-weixin": {
|
||
"permission": {
|
||
"scope.userLocation": {
|
||
"desc": "您的位置信息将用于地图导航"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 微信小程序额外配置
|
||
|
||
在微信小程序后台配置：
|
||
1. 设置 -> 开发设置 -> 服务器域名
|
||
2. 添加 request 合法域名：`https://apis.map.qq.com`
|
||
|
||
## 使用说明
|
||
|
||
uni-app 已内置地图组件，无需额外安装插件。直接使用 `<map>` 组件即可。
|
||
|
||
### 基本用法
|
||
|
||
```vue
|
||
<template>
|
||
<map
|
||
:latitude="latitude"
|
||
:longitude="longitude"
|
||
:markers="markers"
|
||
@markertap="handleMarkerTap"
|
||
/>
|
||
</template>
|
||
```
|
||
|
||
## 功能特性
|
||
|
||
- ✅ 地图显示（腾讯地图）
|
||
- ✅ 标记点（展厅、展品、设施、当前位置）
|
||
- ✅ 点击标记点跳转详情
|
||
- ✅ 楼层切换
|
||
- ✅ 定位功能
|
||
- ✅ 地图缩放
|
||
- ✅ 地图拖拽
|
||
|
||
## 图标资源清单
|
||
|
||
需要准备以下图标（建议 PNG 格式，透明背景）：
|
||
|
||
- `/static/icons/marker-location.png` - 当前位置（30x30px）
|
||
- `/static/icons/marker-hall.png` - 展厅（25x25px）
|
||
- `/static/icons/marker-exhibit.png` - 展品（25x25px）
|
||
- `/static/icons/marker-facility.png` - 设施（25x25px）
|
||
- `/static/icons/location.png` - 定位按钮图标（24x24px）
|
||
|
||
## 参考文档
|
||
|
||
- [腾讯位置服务官网](https://lbs.qq.com/)
|
||
- [uni-app 地图组件文档](https://uniapp.dcloud.net.cn/component/map.html)
|