choose-location.md 6.2 KB
Newer Older
雪洛's avatar
雪洛 已提交
1 2 3 4
## uni.chooseLocation(options) @chooselocation

<!-- UTSAPIJSON.chooseLocation.description -->

W
wanganxp 已提交
5
::: warning 注意
W
wanganxp 已提交
6
地图是商业服务,授权较贵,如需购买,请点击[获取优惠](https://ask.dcloud.net.cn/explore/map/)
W
wanganxp 已提交
7 8
:::

D
DCloud_LXH 已提交
9 10
<!-- UTSAPIJSON.chooseLocation.compatibility -->

雪洛's avatar
雪洛 已提交
11 12 13 14
<!-- UTSAPIJSON.chooseLocation.param -->

<!-- UTSAPIJSON.chooseLocation.returnValue -->

D
DCloud_LXH 已提交
15
<!-- UTSAPIJSON.chooseLocation.tutorial -->
D
DCloud_LXH 已提交
16 17

<!-- UTSAPIJSON.chooseLocation.example -->
VK1688's avatar
VK1688 已提交
18 19 20 21 22

## 三方地图SDK  

uni.chooseLocation 依赖三方地图SDK,点击[查看详情](../component/map.md#mapsdk)

W
wanganxp 已提交
23 24 25 26 27 28 29 30 31 32 33 34 35 36
## 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。
VK1688's avatar
VK1688 已提交
37

W
wanganxp 已提交
38
开发者首先需要开通 [uniCloud](https://unicloud.dcloud.net.cn),选择一个服务商(可自由选择,不是必须使用腾讯云),创建一个服务空间。
VK1688's avatar
VK1688 已提交
39

W
wanganxp 已提交
40
在HBuilderX对项目点右键,关联服务空间。如果你的项目没有创建过 uniCloud 环境,则先右键项目名,创建uniCloud云开发环境,uniCloud 的 web控制台地址:[https://unicloud.dcloud.net.cn](https://unicloud.dcloud.net.cn)
VK1688's avatar
VK1688 已提交
41 42 43

![](https://web-ext-storage.dcloud.net.cn/uni-app-x/API/chooseLocation/aa35d5a6-9b13-4fea-8a0c-1b3534584659.png)

W
wanganxp 已提交
44 45
关联服务空间后,将 uni-map-common 插件导入项目,插件地址:[https://ext.dcloud.net.cn/plugin?id=13872](https://ext.dcloud.net.cn/plugin?id=13872)

VK1688's avatar
VK1688 已提交
46 47 48 49 50 51 52 53 54 55 56
安装完 uni-map-common 插件后,需要将你的地图key配置在 `/uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/uni-map/config.js` 如果你的项目没有此配置文件,则直接根据目录创建对应的目录和 `config.js` 文件,文件内容如下:

```js
module.exports = {
	"default": "qqmap", // 当前使用哪个平台
	"key": {
		"qqmap": "", // 腾讯地图key
		"amap": "", // 高德地图key
	}
}
```
VK1688's avatar
VK1688 已提交
57

W
wanganxp 已提交
58 59 60 61
请务必注意地图的key,是有权限的可以访问周围POI信息的,且有足够的额度。这涉及付费采购。点此联系DCloud咨询[获取优惠](https://ask.dcloud.net.cn/explore/map/)

配置完毕后,本地运行即可使用。正式发布时,记得对uniCloud目录点右键,将相关云函数和模块提交发布到正式服务器上。

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
62
如果需要在uniCloud服务器更安全的验证客户端的身份,你可以在云函数中校验客户的token,避免其他人伪造请求访问你的云函数。
W
wanganxp 已提交
63 64 65

## 自定义样式@custom
> HBuilderX 4.33+
VK1688's avatar
VK1688 已提交
66

W
wanganxp 已提交
67
uni.chooseLocation 虽然是一个框架内置的页面。但提供了丰富的自定义能力。
VK1688's avatar
VK1688 已提交
68

W
wanganxp 已提交
69
该页面自动适配了暗黑、横屏、国际化(内置中文繁简和英文)。页面上的图片元素均使用字体图标,可以覆盖class。
VK1688's avatar
VK1688 已提交
70

W
wanganxp 已提交
71
可通过App.vue中写入全局css样式进行覆盖修改。
VK1688's avatar
VK1688 已提交
72

W
wanganxp 已提交
73 74 75 76
- 以 .uni-choose-location-light 开头的为light模式下的样式
- 以 .uni-choose-location-dark 开头的为dark模式下的样式

样式必须以 `!important;` 结尾才能生效,以下是css的class名称,写入同名名称就可以覆盖。
VK1688's avatar
VK1688 已提交
77

VK1688's avatar
VK1688 已提交
78 79
文本样式除了下方列出的 color 和 background-color 外,你还可以替换 font-family 等任何 text 标签支持的样式。

VK1688's avatar
VK1688 已提交
80 81 82 83 84 85 86 87 88 89 90
地图中心点的icon

```css
.uni-choose-location-light .uni-choose-location-map-target-icon {
	color: red !important;
}
.uni-choose-location-dark .uni-choose-location-map-target-icon {
	color: red !important;
}
```

VK1688's avatar
VK1688 已提交
91
右上方"确认"按钮
VK1688's avatar
VK1688 已提交
92 93 94 95

```css
.uni-choose-location-light .uni-choose-location-nav-confirm-text {
	background-color: red !important;
VK1688's avatar
VK1688 已提交
96
	color: #fff !important;
VK1688's avatar
VK1688 已提交
97 98 99
}
.uni-choose-location-dark .uni-choose-location-nav-confirm-text {
	background-color: red !important;
VK1688's avatar
VK1688 已提交
100
	color: #fff !important;
VK1688's avatar
VK1688 已提交
101 102 103
}
```

VK1688's avatar
VK1688 已提交
104 105 106 107 108 109 110 111 112 113 114 115
左上方"取消"按钮

```css
.uni-choose-location-light .uni-choose-location-nav-back-text {
	color: red !important;
}
.uni-choose-location-dark .uni-choose-location-nav-back-text {
	color: red !important;
}
```

搜索框右侧的"取消"文字
VK1688's avatar
VK1688 已提交
116 117 118 119 120 121 122 123 124 125

```css
.uni-choose-location-light .uni-choose-location-poi-search-cancel {
	color: red !important;
}
.uni-choose-location-dark .uni-choose-location-poi-search-cancel {
	color: red !important;
}
```

VK1688's avatar
VK1688 已提交
126
已选中的POI右侧的对钩icon
VK1688's avatar
VK1688 已提交
127 128 129 130 131 132 133 134

```css
.uni-choose-location-light .uni-choose-location-poi-item-selected-icon {
	color: red !important;
} 
.uni-choose-location-dark .uni-choose-location-poi-item-selected-icon {
	color: red !important;
} 
W
wanganxp 已提交
135 136
```

VK1688's avatar
VK1688 已提交
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
POI标题

```css
.uni-choose-location-light .uni-choose-location-poi-item-title-text {
  color: red !important;
}
.uni-choose-location-dark .uni-choose-location-poi-item-title-text {
  color: red !important;
}
```

POI地址

```css
.uni-choose-location-light .uni-choose-location-poi-item-detail-text {
  color: red !important;
}
.uni-choose-location-dark .uni-choose-location-poi-item-detail-text {
  color: red !important;
}
```

W
wanganxp 已提交
159 160 161 162 163 164 165 166
## 历史问题
uni-app x 4.24以前,Web平台本API调用了腾讯地图的免费gcj02坐标转换接口,该接口从2024年7月18日起被腾讯逐步下线,导致老版本中本API无法使用。请升级到4.24+。

升级后注意:
1. manifest中配置好自己的地图厂商key
2. 确保在地图厂商那里配额足够
3. 确保在地图厂商那里有周边服务的权限。否则无法获取周围地址
4. 确保自己的域名在地图厂商那里正确配置了域名白名单