diff --git a/docs/_sidebar.md b/docs/_sidebar.md index c007c6f69225f8d1ba5c7c41438aa3fec038ae60..9b6f67ba83853f483a73788a7920f4063416c3b0 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -116,7 +116,7 @@ * [uni-upgrade-center App升级中心](upgrade-center.md) * uni-pay 统一支付```{"collapsable": true}``` * * [uni-pay 云端一体页面模板 uni-app](uni-pay/uni-app.md) - * * [uni-pay 云端一体页面模板 uni-app-x](uni-pay/uni-app-x.md) + * * [uni-pay 云端一体页面模板 uni-app x](uni-pay/uni-app-x.md) * * [uni-pay 公共模块](uni-pay/uni-pay-common.md) * * [uni-pay 微信小程序虚拟支付](uni-pay/wxpay-virtual.md) * [uni-cms 内容管理](uni-cms.md) @@ -133,7 +133,8 @@ * [uni-subscribemsg 订阅消息发送](uni-subscribemsg.md) * uni-map 地图```{"collapsable": true}``` * * [uni-map-common 公共模块](uni-map-common.md) - * * [unicloud-map 云端一体组件](unicloud-map.md) + * * [unicloud-map 云端一体组件 uni-app](unicloud-map.md) + * * [unicloud-map 云端一体组件 uni-app x](unicloud-map-x.md) * * [unicloud-map 管理端](unicloud-map-admin.md) * * [unicloud-city-select 城市选择组件](unicloud-city-select.md) * [案例](resource.md) diff --git a/docs/uni-pay/uni-app-x.md b/docs/uni-pay/uni-app-x.md index 10707b2066f74e250a764b014e017d03c05f27a6..343b6da18eb9e0f9acae7371af3f60c1616b43f8 100644 --- a/docs/uni-pay/uni-app-x.md +++ b/docs/uni-pay/uni-app-x.md @@ -1,6 +1,6 @@ # uni-pay-x -> `uni-pay-x` 是 `uni-pay` 的 `uni-app x` 版,目前 `uni-pay-x` 仅支持 Android 端,且只支持支付宝支付 +> `uni-pay-x` 是 `uni-pay` 的 `uni-app x` 版 > 本文档适用于客户端为 `uni-app x` 的版本,需 HBuilderX 4.02 及以上版本。若客户端为 `uni-app` 则请访问:[uni-pay 文档](./uni-app.md) diff --git a/docs/unicloud-map-x.md b/docs/unicloud-map-x.md new file mode 100644 index 0000000000000000000000000000000000000000..ab90cfffe6637d0c20a4879d6985900d99111122 --- /dev/null +++ b/docs/unicloud-map-x.md @@ -0,0 +1,705 @@ +## unicloud-map 云端一体组件 uni-app + +::: warning 注意 +该组件依赖 [uni-map-common 公共模块](uni-map-common.md) + +本文档适用于客户端为 `uni-app x` 的版本,若客户端为 `uni-app` 则请访问:[unicloud-map 文档](./unicloud-map.md) + +::: + +### 介绍@introduce + +基于地图的位置服务,是移动应用的特色场景,但过去开发一个地图类应用非常麻烦。需要对接地图厂商的客户端API、服务器API,再编写自己的业务逻辑。 + +unicloud的MongoDB数据库,对地理位置查询,提供了比传统数据库更方便的GEO查询方案,比如可以直接查询附近的POI信息。(Point of Interest,地图上的兴趣点) + +DCloud之前已推出各种云端一体组件,基于[datacom规范](https://uniapp.dcloud.net.cn/component/datacom.html),组件在客户端可以直接连数据库。 + +现在进一步封装了地图的datacom组件,将前端地图组件和云端数据库连起来,只需写一个``组件,就可以直接从数据库里拉出附近的POI信息,并显示在地图上。 + +在uni-admin中,还提供了POI编辑插件,可以在管理端可视化的标记POI。标记的结果存入opendb表,客户端的``组件可以自动直接拉取。 + +本文是``组件的文档,admin插件文档[另见](unicloud-map-admin.md) + +unicloud-map云端一体组件,主要用于显示数据库里的自定义POI,渲染在地图上。具体可以实现如下功能: + +1. 显示静态POI信息。比如门店位置、景点位置、个人位置、车辆位置、活动举办地点等静态POI +2. 显示动态POI信息和路径。比如外卖软件显示外卖员实时配送路线、打车软件显示司机到乘客上车点的实时路线 +3. 更多基于自定义POI实现的功能 + +> 插件市场地址:[https://ext.dcloud.net.cn/plugin?name=unicloud-map](https://ext.dcloud.net.cn/plugin?name=unicloud-map) + +> 交流群:[uni-map交流群](https://im.dcloud.net.cn/#/?joinGroup=64d62b106823de10406ad72f) + +### 用法示例@example + +#### 简易示例 + +注意:由于组件是读取数据库表[opendb-poi](https://gitee.com/dcloud/opendb/blob/master/collection/opendb-poi/collection.json)进行查询,若表不存在或表内没有POI数据,则不会显示POI,可以通过[unicloud-map-admin插件](unicloud-map-admin.md)管理POI信息 + +```vue + + + +``` + +#### 渲染静态POI@staticpoi + +通过从数据库获取POI数据,渲染到地图上 + +**运行效果图** + + + + + +**示例代码** + +```vue + + + + + +``` + +#### 渲染动态POI@dynamicspoi + +通过从数据库获取POI数据,并通过公共模块 [uni-map-common](https://doc.dcloud.net.cn/uniCloud/uni-map-common.html) 内的路线规划API,计算路线、距离、时间 + +**运行效果图** + + + + + +**示例代码** + +注意:此代码如果运行在APP中,需要使用nvue模式 + +```vue + + + + + +``` + +### 地图Key配置@config + +地图Key需要在两个地方进行配置:前端配置和云端配置(必须都配置)。 + +前端配置Key: + +在 manifest.json 文件中点击 Web 配置,选择并配置腾讯地图或高德地图中的任意一个即可。 + +![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/416.png) + +云端配置Key: + +在 uni-config-center/uni-map/config.js 中进行配置。(没有配置文件就新建) + +![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/419.png) + +### 组件属性@props + +unicloud-map组件依赖map组件,以下是不同于map组件的属性列表,[点击查看map组件属性](https://doc.dcloud.net.cn/uni-app-x/component/map.html#%E5%B1%9E%E6%80%A7) + +| 属性名 | 说明 | 类型 | 默认值 | 可选值 |平台差异说明 | +|----------------- |------------------------------- |--------- |-------- |------- |------- | +| collection | 表名 | string | opendb-poi | - |- | +| loadtime | 数据加载时机 | string | auto | [详情](#loadtime) |- | +| where | 查询条件,注意,只支持对象写法,不支持JQL的字符串语法 | UTSJSONObject | - | - |- | +| poi-maximum | 最大poi显示数量 | number | 100 | - |- | +| poi-max-distance |查询的最大距离 | number | - | - |- | +| poi-min-distance |查询的最小距离 | number | - | - |- | +| default-icon |默认的POI图标 | string | /static/location.png| - |- | +| custom-icons |自定义图标,根据POI的type来区分 | UTSJSONObject [] | - | - |- | +| latitude |中心纬度 | number| - | - |- | +| longitude |中心经度 | number| - | - |- | +| defaultLatitude |默认中心纬度,当latitude无值时使用该值 | number| 39.908823 | - |- | +| defaultLongitude |默认中心经度,当longitude无值时使用该值 | number| 116.39747 | - |- | +| @mounted |组件挂载完毕触发 | EventHandle | - |- |- | +| @custom-poitap |点击自定义POI点时触发 | UTSJSONObject | - |- |- | + +**注意** + +- 只支持腾讯地图或高德地图,且需使用 `gcj02` 坐标,用错坐标类型会显示偏移。 + +### loadtime + +|值 |类型 |描述 | +|:- |:- |:- | +|auto |String |页面就绪后或属性变化后加载数据,默认为auto | +|onready|String |页面就绪后不自动加载数据,属性变化后加载。适合在onready中接收上个页面的参数作为where条件时。 | +|manual |String |手动模式,不自动加载数据。如果涉及到分页,需要先手动修改当前页,在调用加载数据 | + +### 组件方法@function + +| 方法名 | 说明 | +|-----------------|-------------------------------| +| refresh | 主动刷新POI数据 | +| getMarkers | 获取组件内的markers | +| setMarkers | 设置组件内的markers | +| getPolyline | 获取组件内的polyline | +| setPolyline | 设置组件内的polyline | +| getCircles | 获取组件内的circles | +| setCircles | 设置组件内的circles | +| getControls | 获取组件内的controls | +| setControls | 设置组件内的controls | + +**注意** + +使用这些方法前,需要在组件先声明 `ref="map"` + +```vue + +``` + +**refresh** + +主动刷新POI数据 + +示例 + +```js +const mapInstance = this.$refs["map"] as UnicloudMapComponentPublicInstance; +await mapInstance.refresh({ + needIncludePoints: true +}); +``` + +**getMarkers** + +获取组件内的markers + +示例 + +```js +const mapInstance = this.$refs["map"] as UnicloudMapComponentPublicInstance; +let markers = mapInstance.getMarkers(); +console.log('markers: ', markers); +``` + +**setMarkers** + +示例 + +```js +const mapInstance = this.$refs["map"] as UnicloudMapComponentPublicInstance; +const markers :Marker[]= [{ + id: 0, + latitude: 39.908692, + longitude: 116.397477, + title: '天安门', + // zIndex: '1', + iconPath: '../../../static/location.png', + width: 40, + height: 40, + anchor: { + x: 0.5, + y: 1 + }, + callout: { + content: '首都北京\n天安门', + color: '#00BFFF', + fontSize: 12, + borderRadius: 10, + borderWidth: 2, + borderColor: '#333300', + bgColor: '#CCFF11', + padding: 5, + display: 'ALWAYS' + } as MapMarkerCallout +} as Marker]; + +mapInstance.setMarkers(markers); +``` + +**getPolyline** + +获取组件内的polyline + +示例 + +```js +const mapInstance = this.$refs["map"] as UnicloudMapComponentPublicInstance; +let polyline = mapInstance.getPolyline(); +console.log('polyline: ', polyline); +``` + +**setPolyline** + +示例 + +```js +const mapInstance = this.$refs["map"] as UnicloudMapComponentPublicInstance; +const polyline: Polyline[] = [{ + points: [{ + latitude: 39.925539, + longitude: 116.279037 + }, + { + latitude: 39.925539, + longitude: 116.520285 + }], + color: '#FFCCFF', + width: 7, + dottedLine: true, + arrowLine: true, + borderColor: '#000000', + borderWidth: 2 +} as Polyline]; +mapInstance.setPolyline(polyline); +``` + +**getCircles** + +获取组件内的circles + +示例 + +```js +const mapInstance = this.$refs["map"] as UnicloudMapComponentPublicInstance; +let circles = mapInstance.getCircles(); +console.log('circles: ', circles); +``` + +**setCircles** + +示例 + +```js +const mapInstance = this.$refs["map"] as UnicloudMapComponentPublicInstance; +const circles: Circle[] = [{ + latitude: 39.996441, + longitude: 116.411146, + radius: 15000, + strokeWidth: 5, + color: '#CCFFFF', + fillColor: '#CC0000' +} as Circle]; +mapInstance.setCircles(circles); +``` + +**getControls** + +获取组件内的controls + +示例 + +```js +const mapInstance = this.$refs["map"] as UnicloudMapComponentPublicInstance; +let controls = mapInstance.getControls(); +console.log('controls: ', controls); +``` + +**setControls** + +示例 + +```js +const mapInstance = this.$refs["map"] as UnicloudMapComponentPublicInstance; +const controls: Control[] = [{ + id: 1, + position: { + left: 5, + top: 180, + width: 30, + height: 30 + } as ControlPosition, + iconPath: '../../../static/uni.png', + clickable: true +} as Control]; +mapInstance.setControls(controls); +``` + +### unicloud-map的opendb数据表@database + +unicloud-map需要创建以下表后才能正常运行,可以右键插件database目录下的opendb-poi.schema.json上传Schema + +![](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/3707/411.png) + +- 地图POI表 [opendb-poi](https://gitee.com/dcloud/opendb/blob/master/collection/opendb-poi/collection.json) + +### 三方定位和地图服务收费说明@fee + +unicloud-map是免费的,但高德、腾讯、百度等地图的使用需向地图厂商采购商业授权。DCloud与地图厂商达成合作,可更优惠的给开发者提供地图服务。[详见](https://uniapp.dcloud.net.cn/component/map.html#%E4%B8%89%E6%96%B9%E5%AE%9A%E4%BD%8D%E5%92%8C%E5%9C%B0%E5%9B%BE%E6%9C%8D%E5%8A%A1%E6%94%B6%E8%B4%B9%E8%AF%B4%E6%98%8E) + +### 【福利】高德拉新 + +一键注册高德企业开发者,最高可获取210元奖励金,详见[https://ask.dcloud.net.cn/article/41279](https://ask.dcloud.net.cn/article/41279) diff --git a/docs/unicloud-map.md b/docs/unicloud-map.md index be94bb20378e811d1d12548ab7d9e37e2a8626a0..5b8c47a00931b5147f6814f37428879a2a853304 100644 --- a/docs/unicloud-map.md +++ b/docs/unicloud-map.md @@ -1,7 +1,9 @@ -## unicloud-map 云端一体组件 +## unicloud-map 云端一体组件 uni-app x ::: warning 注意 该组件依赖 [uni-map-common 公共模块](uni-map-common.md) + +本文档适用于客户端为 `uni-app` 的版本,若客户端为 `uni-app x` 则请访问:[unicloud-map x 文档](./unicloud-map-x.md) ::: ### 介绍@introduce