chore: initialize frontend miniapp repository
This commit is contained in:
87
docs/TENCENT_MAP_GUIDE.md
Normal file
87
docs/TENCENT_MAP_GUIDE.md
Normal file
@@ -0,0 +1,87 @@
|
||||
# 腾讯地图集成说明
|
||||
|
||||
## 配置步骤
|
||||
|
||||
### 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)
|
||||
Reference in New Issue
Block a user