Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
c5255871
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
c5255871
编写于
11月 13, 2024
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chooseLocation注意事项
上级
9318a1cc
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
44 addition
and
18 deletion
+44
-18
docs/api/choose-location.md
docs/api/choose-location.md
+44
-18
未找到文件。
docs/api/choose-location.md
浏览文件 @
c5255871
...
@@ -3,15 +3,7 @@
...
@@ -3,15 +3,7 @@
<!-- UTSAPIJSON.chooseLocation.description -->
<!-- UTSAPIJSON.chooseLocation.description -->
::: warning 注意
::: warning 注意
Web平台本API调用了腾讯地图的免费gcj02坐标转换接口,该接口从2024年7月18日起被腾讯逐步下线,导致老版本中本API无法使用。请立即升级到
`uni-app 4.24版`
。
地图是商业服务,授权较贵,如需购买,请点击
[
获取优惠
](
https://ask.dcloud.net.cn/explore/map/
)
。
升级后注意:
1.
manifest中配置好自己的地图厂商key
2.
确保在地图厂商那里配额足够
3.
确保在地图厂商那里有周边服务的权限。否则无法获取周围地址
4.
确保自己的域名在地图厂商那里正确配置了域名白名单
地图厂商的商业授权较贵,如需购买,请点击
[
获取优惠
](
https://ask.dcloud.net.cn/explore/map/
)
。
:::
:::
<!-- UTSAPIJSON.chooseLocation.compatibility -->
<!-- UTSAPIJSON.chooseLocation.compatibility -->
...
@@ -28,14 +20,29 @@ Web平台本API调用了腾讯地图的免费gcj02坐标转换接口,该接口
...
@@ -28,14 +20,29 @@ Web平台本API调用了腾讯地图的免费gcj02坐标转换接口,该接口
uni.chooseLocation 依赖三方地图SDK,点击
[
查看详情
](
../component/map.md#mapsdk
)
uni.chooseLocation 依赖三方地图SDK,点击
[
查看详情
](
../component/map.md#mapsdk
)
## uniCloud依赖
## App平台依赖uniCloud@unicloud
> HBuilderX 4.33+
uni.chooseLocation 中有个功能是传入位置返回周围的POI信息。在腾讯地图中该功能不是客户端API,而是一个webservice接口。因为涉及收费,该接口需要传入key。
在App中,从客户端带着key直接发起请求腾讯地图的webservice接口是不安全的。key泄露后会导致其他人调用腾讯相关能力但费用由key的所属人缴纳。
web端可以使用在腾讯地图web控制台配置域名白名单的方式,但App无法采用这种方式。
App上安全的方式是由客户端不带key请求开发者的服务器,由开发者的服务器判断客户端的身份,然后服务器带着key请求腾讯地图的服务器,成功后返回POI列表给客户端。
DCloud的所有服务器API,都是基于uniCloud的。并且uniCloud早已经有
[
uni-map-common
](
https://doc.dcloud.net.cn/uniCloud/uni-map-common.html
)
所以在腾讯地图的 uni.chooseLocation 中,需要依赖 uniCloud 的 uni-map-common 插件。开发者在该插件的配置文件中配置好key,无需自己编写代码,即可使用本API。
uni.chooseLocation 依赖 uniCloud 的 uni-map-common 插件,请先关联服务空间后,并安装 uni-map-common 插件,插件地址:
[
https://ext.dcloud.net.cn/plugin?id=13872
](
https://ext.dcloud.net.cn/plugin?id=13872
)
开发者首先需要开通
[
uniCloud
](
https://unicloud.dcloud.net.cn
)
,选择一个服务商(可自由选择,不是必须使用腾讯云),创建一个服务空间。
如果你的项目没有创建过 uniCloud 环境,则先右键项目名,创建uniCloud云开发环境,uniCloud 的 web控制台地址:
[
https://unicloud.dcloud.net.cn
](
https://unicloud.dcloud.net.cn
)
在HBuilderX对项目点右键,关联服务空间。
如果你的项目没有创建过 uniCloud 环境,则先右键项目名,创建uniCloud云开发环境,uniCloud 的 web控制台地址:
[
https://unicloud.dcloud.net.cn
](
https://unicloud.dcloud.net.cn
)
![](
https://web-ext-storage.dcloud.net.cn/uni-app-x/API/chooseLocation/aa35d5a6-9b13-4fea-8a0c-1b3534584659.png
)
![](
https://web-ext-storage.dcloud.net.cn/uni-app-x/API/chooseLocation/aa35d5a6-9b13-4fea-8a0c-1b3534584659.png
)
关联服务空间后,将 uni-map-common 插件导入项目,插件地址:
[
https://ext.dcloud.net.cn/plugin?id=13872
](
https://ext.dcloud.net.cn/plugin?id=13872
)
安装完 uni-map-common 插件后,需要将你的地图key配置在
`/uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/uni-map/config.js`
如果你的项目没有此配置文件,则直接根据目录创建对应的目录和
`config.js`
文件,文件内容如下:
安装完 uni-map-common 插件后,需要将你的地图key配置在
`/uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/uni-map/config.js`
如果你的项目没有此配置文件,则直接根据目录创建对应的目录和
`config.js`
文件,文件内容如下:
```
js
```
js
...
@@ -48,15 +55,25 @@ module.exports = {
...
@@ -48,15 +55,25 @@ module.exports = {
}
}
```
```
## 自定义样式
请务必注意地图的key,是有权限的可以访问周围POI信息的,且有足够的额度。这涉及付费采购。点此联系DCloud咨询
[
获取优惠
](
https://ask.dcloud.net.cn/explore/map/
)
配置完毕后,本地运行即可使用。正式发布时,记得对uniCloud目录点右键,将相关云函数和模块提交发布到正式服务器上。
如果需要在uniCloud服务器更安全的验证客户端的身份,请开通
[
云端一体安全网络
](
https://doc.dcloud.net.cn/uniCloud/secure-network.html
)
。它可以对App的包名、证书进行校验,防止其他人盗用你的接口。
uni.chooseLocation 内的 icon字体颜色支持通过在App.vue中写入全局css样式进行修改
## 自定义样式@custom
> HBuilderX 4.33+
以 .uni-choose-location-light 开头的为明亮模式下的样式
uni.chooseLocation 虽然是一个框架内置的页面。但提供了丰富的自定义能力。
以 .uni-choose-location-dark 开头的为暗黑模式下的样式
该页面自动适配了暗黑、横屏、国际化(内置中文繁简和英文)。页面上的图片元素均使用字体图标,可以覆盖class。
样式必须以
`!important;`
结尾才能生效,以下是css样式名称
可通过App.vue中写入全局css样式进行覆盖修改。
-
以 .uni-choose-location-light 开头的为light模式下的样式
-
以 .uni-choose-location-dark 开头的为dark模式下的样式
样式必须以
`!important;`
结尾才能生效,以下是css的class名称,写入同名名称就可以覆盖。
地图中心点的icon
地图中心点的icon
...
@@ -103,3 +120,12 @@ uni.chooseLocation 内的 icon字体颜色支持通过在App.vue中写入全局c
...
@@ -103,3 +120,12 @@ uni.chooseLocation 内的 icon字体颜色支持通过在App.vue中写入全局c
color
:
red
!important
;
color
:
red
!important
;
}
}
```
```
## 历史问题
uni-app x 4.24以前,Web平台本API调用了腾讯地图的免费gcj02坐标转换接口,该接口从2024年7月18日起被腾讯逐步下线,导致老版本中本API无法使用。请升级到4.24+。
升级后注意:
1.
manifest中配置好自己的地图厂商key
2.
确保在地图厂商那里配额足够
3.
确保在地图厂商那里有周边服务的权限。否则无法获取周围地址
4.
确保自己的域名在地图厂商那里正确配置了域名白名单
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录