tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/component/map.md

@@ -0,0 +1,381 @@
+::: sourceCode
+## map
+
+地图
+
+地图由三方专业地图厂商提供SDK。在App和Web中，使用三方SDK需在[manifest](../collocation/manifest.md)中进行配置。
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | 4.31 | 4.31 | 4.61 |
+
+不同图商在不同平台的兼容性
+|图商		|Web|Android|iOS	|harmony|
+|:-:		|:-:|:-:		|:-:	|:-:		|
+|腾讯		|√	|4.31+	|4.31+|4.61+	|
+|高德		|√	|√			|√		|x			|
+|Google	|√	|x			|x		|x			|
+
+App标准基座里地图是腾讯地图，如需高德地图版本，请在插件市场单独安装，需要自定义基座运行：[官方高德地图插件](https://ext.dcloud.net.cn/plugin?id=25947)。该插件基于独立的 `<amap>` 组件实现，Android平台与内置 map 组件存在功能差异：属性、事件、上下文 API 均为内置 map 的子集；iOS平台自`1.3.0`起和内置map组件功能一致；Harmony 平台暂不支持，详见[高德地图插件功能差异](#amap)。
+
+除了内置支持的图商，还可以在插件市场寻找更多地图解决方案：
+1. [插件市场的三方地图插件](https://ext.dcloud.net.cn/search?q=%E5%9C%B0%E5%9B%BE&orderBy=Relevance&uni-appx=1)
+2. 使用web-view中的地图
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| longitude | number | 0 | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 中心经度 |
+| latitude | number | 0 | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 中心纬度 |
+| scale | number | 16 | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 缩放级别，web端取值范围为5-18 , app端取值范围为3-20 |
+| ~~theme~~ | string | "normal" | Web x / 微信小程序 x / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 主题（satellite 或 normal） |
+| min-scale | number | 3 | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 最小缩放级别 |
+| max-scale | number | 20 | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 最大缩放级别 |
+| layer-style | string | "1" | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 个性化地图（如实现地图暗黑模式） |
+| markers | Marker\[] \| null |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 标记点 |
+| covers | array |   | Web 4.0 / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 即将移除，请使用 markers |
+| polyline | Polyline\[] \| null |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 路线 |
+| polygons | Polygon\[] \| null |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 多边形 |
+| circles | Circle\[] \| null |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 圆 |
+| controls | Control\[] \| null |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 控件 |
+| include-points | LocationObject\[] \| null |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 缩放视野以包含所有给定的坐标点 |
+| show-location | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 显示带有方向的当前定位点 |
+| enable-3D | boolean | false | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否显示3D楼块 |
+| show-compass | boolean | false | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否显示指南针 |
+| enable-zoom | boolean | true | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否支持缩放 |
+| enable-scroll | boolean | true | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否支持拖动 |
+| enable-rotate | boolean | true | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否支持旋转 |
+| rotate | number | 0 | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 旋转角度(范围0-360)地图正北和设备 y 轴角度的夹角 |
+| skew | number | 0 | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 |
+| enable-overlooking | boolean | false | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否开启俯视（是否开启手势修改倾斜角度） |
+| enable-satellite | boolean | false | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否开启卫星图 |
+| enable-traffic | boolean | false | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否开启实时路况 |
+| enable-poi | boolean | true | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否展示 POI 点 |
+| enable-building | boolean | false | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否展示建筑物 |
+| enable-indoorMap | boolean | false | Web x / 微信小程序 x / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否展示室内地图 |
+| subkey | string |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>地图能力【个性化地图】使用的key，不支持动态修改 |
+| show-scale | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>显示比例尺，工具暂不支持 |
+| enable-auto-max-overlooking | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>开启最大俯视角，俯视角度从 45 度拓展到 75 度 |
+| setting | object |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(object)*<br/>配置项 |
+| enable3-d | boolean | false | Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 是否显示3D楼块 |
+| enable-indoor-map | boolean | false |   |   |
+| @markertap | (event: [UniMapMarkerTapEvent](#unimapmarkertapevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 点击标记点时触发 |
+| @callouttap | (event: UniEvent) => void |   | Web 4.0 / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 点击标记点对应的气泡时触发 |
+| @controltap | (event: [UniMapControlTapEvent](#unimapcontroltapevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 点击控件时触发 |
+| @regionchange | (event: [UniMapRegionChangeEvent](#unimapregionchangeevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 视野发生变化时触发 |
+| @updated | (event: [UniMapUpdatedEvent](#unimapupdatedevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61 | 在地图渲染更新完成时触发 |
+| @tap | (event: [UniMapTapEvent](#unimaptapevent)) => void |   | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 点击地图时触发 |
+| @anchorpointtap | (event: [UniMapAnchorPointTapEvent](#unimapanchorpointtapevent)) => void |   | Web x / 微信小程序 x / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 点击定位标时触发 |
+| @poitap | (event: [UniMapPoiTapEvent](#unimappoitapevent)) => void |   | Web x / 微信小程序 4.41 / Android 4.31 / iOS 4.31 / HarmonyOS 4.61（部分支持，见上） | 点击地图poi点时触发 |
+| @labeltap | eventhandle |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>点击label时触发，`e.detail = {markerId}` |
+| @polylinetap | eventhandle |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>点击地图路线时触发，`e.detail = {longitude, latitude}` |
+| @abilitysuccess | eventhandle |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>地图能力生效时触发，`e.detail = {ability, errCode, errMsg}` |
+| @abilityfail | eventhandle |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>地图能力失败时触发，`e.detail = {ability, errCode, errMsg}` |
+| @authsuccess | eventhandle |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>地图鉴权结果成功时触发，`e.detail = {errCode, errMsg}` |
+| @interpolatepoint | eventhandle |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>MapContext.moveAlong 插值动画时触发。`e.detail = {markerId, longitude, latitude, animationStatus: "interpolating"}` |
+| @error | eventhandle |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>组件错误时触发，例如创建或鉴权失败，`e.detail = {longitude, latitude}` |
+
+### 事件
+#### UniMapMarkerTapEvent
+
+```mermaid
+graph LR
+  
+UniMapMarkerTapEvent -- Extends --> UniPointerEvent
+  style UniPointerEvent color:#42b983
+  click UniPointerEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unipointerevent"
+```
+##### UniMapMarkerTapEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniMapMarkerTapEventDetail** | 否 |
+| 名称 | 类型 | 必备 |
+| :- | :- | :- |
+| markerId | number | 否 |
+
+#### UniMapControlTapEvent
+
+```mermaid
+graph LR
+  
+UniMapControlTapEvent -- Extends --> UniCustomEvent&ltUniMapControlTapEventDetail&gt
+  style UniCustomEvent&ltUniMapControlTapEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniMapControlTapEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniMapControlTapEventDetail
+
+###### UniMapControlTapEventDetail 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| controlId | number | 否 |
+
+#### UniMapRegionChangeEvent
+
+```mermaid
+graph LR
+  
+UniMapRegionChangeEvent -- Extends --> UniCustomEvent&lt&gt
+  style UniCustomEvent&lt&gt color:#42b983
+  click UniCustomEvent&lt&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniMapRegionChangeEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| causedBy | string | 否 |
+
+#### UniMapUpdatedEvent
+
+```mermaid
+graph LR
+  
+UniMapUpdatedEvent -- Extends --> UniCustomEvent&ltUniMapUpdatedEventDetail&gt
+  style UniCustomEvent&ltUniMapUpdatedEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniMapUpdatedEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+#### UniMapTapEvent
+
+```mermaid
+graph LR
+  
+UniMapTapEvent -- Extends --> UniPointerEvent
+  style UniPointerEvent color:#42b983
+  click UniPointerEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unipointerevent"
+```
+##### UniMapTapEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniMapTapEventDetail** | 否 |
+| 名称 | 类型 | 必备 |
+| :- | :- | :- |
+| latitude | number | 否 |
+| longitude | number | 否 |
+
+#### UniMapAnchorPointTapEvent
+
+```mermaid
+graph LR
+  
+UniMapAnchorPointTapEvent -- Extends --> UniPointerEvent
+  style UniPointerEvent color:#42b983
+  click UniPointerEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unipointerevent"
+```
+##### UniMapAnchorPointTapEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniMapAnchorPointTapEventDetail** | 否 |
+| 名称 | 类型 | 必备 |
+| :- | :- | :- |
+| latitude | number | 否 |
+| longitude | number | 否 |
+
+#### UniMapPoiTapEvent
+
+```mermaid
+graph LR
+  
+UniMapPoiTapEvent -- Extends --> UniPointerEvent
+  style UniPointerEvent color:#42b983
+  click UniPointerEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unipointerevent"
+```
+##### UniMapPoiTapEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniMapPoiTapEventDetail** | 否 |
+| 名称 | 类型 | 必备 |
+| :- | :- | :- |
+| latitude | number | 否 |
+| longitude | number | 否 |
+| name | string | 否 |
+
+### 子组件 @children-tags
+不可以嵌套组件
+
+::: warning 注意事项
+- App平台 `layer-style` 属性用于设置个性化地图样式，可用于适配实现地图的暗黑模式。使用前需在腾讯位置服务后台 “个性化样式” 的 “[我的样式](https://lbs.qq.com/dev/console/custom/mapStyle)” 中创建，并在 “[样式应用](https://lbs.qq.com/dev/console/custom/apply)” 中将相应的Key绑定样式，`layer-style` 的值为绑定样式的序号。更多信息可参考腾讯地图官方文档[Android平台个性化地图](https://lbs.qq.com/mobile/androidMapSDK/developerGuide/personalized)、[iOS平台个性化地图](https://lbs.qq.com/mobile/iOSMapSDK/mapGuide/mapStyle)。
+
+### 上下文对象API
+
+map组件的操作api为[uni.createMapContext()](../api/create-map-context.md)。
+
+给map组件设一个id属性，将id的值传入uni.createMapContext()，即可得到map组件的上下文对象，进一步可使用`.addMarkers()`等方法。
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/map/map.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/map/map.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/map/map
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/map/map
+
+>示例
+```vue
+<template>
+  <view class="content">
+    <map class="map" id="map1" ref="map1" :longitude="location.longitude" :latitude="location.latitude" :scale="scale"
+      :markers="markers" :include-points="includePoints" :polyline="polyline" :polygons="polygons" :circles="circles"
+      :controls="controls" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
+      :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
+      :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
+      :enable-traffic="enableTraffic" @markertap="onmarkertap" @callouttap="oncallouttap" @controltap="oncontroltap"
+      @regionchange="onregionchange" @tap="maptap" @updated="onupdated" @poitap="onpoitap"></map>
+    <scroll-view class="scrollview">
+      <view class="tips"><text class="tips-text">注意：App和Web需要正确配置地图服务商的Key才能显示地图组件</text></view>
+      <view class="uni-title">
+        <text class="uni-title-text">属性示例</text>
+      </View>
+      <input-data defaultValue="13" title="scale: 缩放级别，取值范围为5-18" type="number"
+        @confirm="confirm_scale_input"></input-data>
+      <boolean-data :defaultValue="showLocation" title="开启显示带有方向的当前定位点" @change="change_show_location"></boolean-data>
+      <boolean-data :default-value="enable3D" :disabled="enableSatellite" title="3D效果(放大缩放级别才能看到建筑物3D效果)" @change="change_enable_3d"></boolean-data>
+      <boolean-data :default-value="showCompass" title="显示指南针" @change="change_show_campass"></boolean-data>
+      <boolean-data :default-value="enableOverlooking" title="俯视支持" @change="change_enable_overlooking"></boolean-data>
+      <boolean-data :default-value="enableRotate" title="旋转支持" @change="change_enable_rotate"></boolean-data>
+      <boolean-data :default-value="enableZoom" title="缩放支持" @change="change_enable_zoom"></boolean-data>
+      <boolean-data :default-value="enableScroll" title="拖动支持" @change="change_enable_scroll"></boolean-data>
+      <boolean-data :default-value="enableSatellite" title="卫星图" @change="change_enable_satellite"></boolean-data>
+      <boolean-data :default-value="enableTraffic" title="实时路况" @change="change_enable_traffic"></boolean-data>
+
+      <button class="button" @click="addControls">控件</button>
+      <button class="button" @click="addMarkers">添加标记点</button>
+      
+      <button class="button" @click="addMarkersLabel">为标记点旁边增加标签</button>
+      
+      <button class="button" @click="removeMarker">移除ID为4的标记点和标签</button>
+      <button class="button" @click="addPolyline">添加路线</button>
+      <button class="button" @click="removePolyline">移除一条路线</button>
+      <button class="button" @click="addPolygons">添加多边形</button>
+      <button class="button" @click="removePolygon">移除一个多边形</button>
+      <button class="button" @click="addCircles">添加圆</button>
+      <button class="button" @click="removeCircle">移除一个圆</button>
+      <button class="button" @click="includePoint">缩放视野以包含所有给定的坐标点</button>
+      <view class="uni-title">
+        <text class="uni-title-text">方法示例</text>
+      </View>
+      <button class="button" @click="handleGetCenterLocation">获取当前地图中心的经纬度</button>
+      <button class="button" @click="handleGetRegion">获取当前地图的视野范围</button>
+      <button class="button" @click="handleTranslateMarker">平移marker</button>
+      <button class="button" @click="handleMoveToLocation(true)">将地图中心移动到指定坐标</button>
+      <button class="button" @click="handleMoveToMyLocation">将地图中心移动到当前位置</button>
+      <button class="button" @click="handleGetScale">获取当前地图的缩放级别</button>
+    </scroll-view>
+  </view>
+</template>
+
+
+
+<style>
+  .content {
+    flex: 1;
+  }
+
+  .map {
+    width: 100%;
+    height: 300px;
+    background-color: #f0f0f0;
+  }
+
+  .scrollview {
+    flex: 1;
+    padding: 10px;
+  }
+
+  .button {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+
+  .tips {
+    margin-top: 15px;
+    opacity: .8;
+  }
+
+  .tips-text {
+    font-size: 12px;
+  }
+</style>
+
+```
+
+## 三方地图SDK@mapsdk
+
+### 腾讯地图
+
+#### app-android平台仓储依赖
+- com.tencent.map:tencent-map-vector-sdk:5.6.0
+- com.tencent.map:sdk-utilities:1.0.9
+- com.tencent.map.geolocation:TencentLocationSdk-openplatform:7.5.4.3
+- com.github.bumptech.glide:glide:4.16.0
+
+#### app-ios平台Cocoapods依赖
+- {"name":"Tencent-MapSDK", "version": "5.1.0"}
+- {"name": "Tencent-MapVisualPlugin", "version": "3.1.0"}
+- {"name": "Tencent-MapFoundation", "version": ">=3.3.0"}
+- {"name": "Tencent-MapUtils", "version": "1.2.3"}
+
+#### 审图号
+
+GS粤（2023）1171号
+
+#### Map Key配置
+
+app平台目前还没有可视化界面，采用摇树机制，即调用地图相关api才会把地图组件编译到基座中，Map Key配置方式如下：
+
+- iOS平台：需要在info.plist中配置对应的Key，参考[iOS平台配置腾讯地图Key](../collocation/manifest-ios.html#maptencent)
+- Android平台：需要在AndroidManifest.xml配置Key， 参考[Android平台配置腾讯地图Key](../collocation/manifest-android.html#maptencent)
+- Harmony平台：需要在`/harmony-configs/entry/src/main/module.json5`的metadata属性内配置Key，同时 manifest.json 内还需要配置 app.distribute.modules.uni-map 参考[Harmony平台配置腾讯地图Key](../collocation/manifest-harmony.html#uni-map-tencent)
+
+### 高德地图@amap
+
+App平台的高德地图由插件市场 [官方高德地图插件 uni-map-amap](https://ext.dcloud.net.cn/plugin?id=25947) 提供，基于独立的 `<amap>` 组件实现，需要自定义基座运行，支持 Android、iOS 平台，暂不支持 Harmony。
+
+高德地图插件与内置 map 组件（腾讯地图）的功能差异概览：
+
+| 差异项 | 内置 map 组件（腾讯地图） | 高德地图插件 |
+| :- | :-: | :-: |
+| 基础属性：longitude、latitude、scale、theme、min-scale、max-scale、layer-style、show-location、enable-satellite、enable-traffic | √ | √ |
+| markers 标记点 | √ | √ |
+| 覆盖物属性：polyline、polygons、circles、controls、include-points | √ | Android：x；iOS：1.3.0+ |
+| 手势视角属性：enable-3D、show-compass、enable-zoom、enable-scroll、enable-rotate、rotate、skew、enable-overlooking | √ | Android：x；iOS：1.3.0+ |
+| 显示控制属性：enable-poi、enable-building、enable-indoorMap | √ | Android：x；iOS：1.3.0+ |
+| 事件：@markertap、@controltap、@regionchange、@updated、@tap、@anchorpointtap、@poitap | √ | Android：x；iOS：1.3.0+ |
+| 上下文 API：`uni.createAmapContext` 及已实现的上下文方法 | √ | Android：x；iOS：1.3.0+ |
+
+其中，iOS 1.3.0 的上下文 API 支持 `getCenterLocation`、`moveToLocation`、`translateMarker`、`includePoints`、`getRegion`、`getScale`、`addMarkers`、`removeMarkers`、`moveAlong`、`addGroundOverlay`、`updateGroundOverlay`、`removeGroundOverlay`。高德插件使用 `uni.createAmapContext(mapId, component)`，与内置腾讯地图的 `uni.createMapContext(mapId)` 不同。
+
+完整差异明细、插件版本支持情况及 API Key 配置说明，详见插件市场 [uni-map-amap 插件文档](https://ext.dcloud.net.cn/plugin?id=25947)。
+
+### 地图扩展
+
+所谓地图扩展就是可以通过获取map组件的形式扩展地图功能，暂时只有Android支持，步骤如下：
+
+1. 新建一个uts插件，配置依赖腾讯地图SDK
+2. 在uvue页面调用`uni.getElementById()`获取组件对象`UniElement`，将`UniElement`对象传入uts插件
+3. 在uts插件中通过`UniElement`的`getAndroidView`获取原生地图View，使用原生地图view与地图SDK提供的API开发扩展功能,例：
+
+```ts
+import { CameraUpdateFactory } from "com.tencent.tencentmap.mapsdk.maps"
+import { MapView } from "com.tencent.tencentmap.mapsdk.maps"
+export function setScale(element : UniElement, scale : number) : void {
+	(element?.getAndroidView() as MapView)?.map?.moveCamera(CameraUpdateFactory.zoomTo(scale.toFloat()));
+}
+```
+
+## Tips
+- 在App和Web平台，没有在manifest中配置好图商的sdk key信息，将无法使用地图。某些图商的sdk key，区分Web、Android、iOS，注意别配混了。有些sdk key，会绑定校验web的域名或app的包名和签名证书摘要，都要匹配准确才能使用地图。
+- 谷歌地图仅支持 `wgs84` 坐标，中国的各个地图仅支持 `gcj02` 坐标，注意使用定位API获取的位置，需与map组件的图商需求一致，把 wgs84 的坐标显示在中国地图上会导致偏移。
+- 地图是商业服务，需购买商业地图授权（5万/年）。如果没有授权，不但使用会被限频，还会被某些应用商店拒绝上架。DCloud与地图厂商谈判，给开发者提供了优惠，点此详询 [地图商业授权咨询](https://ask.dcloud.net.cn/explore/map/)。
+- 鸿蒙App蒸汽模式下仅支持鸿蒙真机运行，不支持模拟器运行
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.map.map)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/map.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=map&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=map&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=map&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=map&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=map)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=map&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/match-media.md

@@ -0,0 +1,132 @@
+::: sourceCode
+## match-media
+
+> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-match-media
+
+> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-match-media
+
+media query 匹配检测节点
+
+宽屏适配指南另见：[详情](../adapt.md)
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.71 | 4.41 | 4.71 | 5.0 | 4.71 |
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| width | string \| number | Web 4.71 / 微信小程序 4.41 / Android 4.71 / iOS 5.0 / HarmonyOS 4.71 | 页面宽度（px 为单位） |
+| min-width | string \| number | Web 4.71 / 微信小程序 4.41 / Android 4.71 / iOS 5.0 / HarmonyOS 4.71 | 页面最小宽度（px 为单位） |
+| max-width | string \| number | Web 4.71 / 微信小程序 4.41 / Android 4.71 / iOS 5.0 / HarmonyOS 4.71 | 页面最大宽度（px 为单位） |
+| height | string \| number | Web 4.71 / 微信小程序 4.41 / Android 4.71 / iOS 5.0 / HarmonyOS 4.71 | 页面高度（px 为单位） |
+| min-height | string \| number | Web 4.71 / 微信小程序 4.41 / Android 4.71 / iOS 5.0 / HarmonyOS 4.71 | 页面最小高度（px 为单位） |
+| max-height | string \| number | Web 4.71 / 微信小程序 4.41 / Android 4.71 / iOS 5.0 / HarmonyOS 4.71 | 页面最大高度（px 为单位） |
+| orientation | portrait \| landscape | Web 4.71 / 微信小程序 4.41 / Android 4.71 / iOS 5.0 / HarmonyOS 4.71 | 屏幕方向 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| portrait | Web 4.71 / 微信小程序 4.41 / Android 4.71 / iOS 5.0 / HarmonyOS 4.71 | 竖屏 |
+| landscape | Web 4.71 / 微信小程序 4.41 / Android 4.71 / iOS 5.0 / HarmonyOS 4.71 | 横屏 |
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/match-media/match-media.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/match-media/match-media.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/match-media/match-media
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/match-media/match-media
+
+>示例
+```vue
+<template>
+  <view>
+    <page-intro style="margin: 10px 20px 0;" content="本页演示 match-media 媒体查询组件：按 min-width、max-width、width、高度与 orientation 等条件匹配，控制子节点在不同屏幕下的显示。"></page-intro>
+    <view class="container">
+      <view class="section">
+        <text class="subtitle">基础条件匹配</text>
+
+        <match-media :min-width="400">
+          <view class="demo-box">屏幕宽度 ≥ 400px 时显示</view>
+        </match-media>
+
+        <match-media :max-width="600">
+          <view class="demo-box">屏幕宽度 ≤ 600px 时显示</view>
+        </match-media>
+
+        <match-media :width="375">
+          <view class="demo-box">屏幕宽度 = 375px 时显示</view>
+        </match-media>
+
+        <match-media :min-height="600">
+          <view class="demo-box">屏幕高度 ≥ 600px 时显示</view>
+        </match-media>
+
+        <match-media :max-height="800">
+          <view class="demo-box">屏幕高度 ≤ 800px 时显示</view>
+        </match-media>
+
+        <match-media :height="667">
+          <view class="demo-box">屏幕高度 = 667px 时显示</view>
+        </match-media>
+
+        <match-media orientation="portrait">
+          <view class="demo-box">竖屏 时显示</view>
+        </match-media>
+        <match-media orientation="landscape">
+          <view class="demo-box">横屏 时显示</view>
+        </match-media>
+      </view>
+      <view class="section">
+        <text class="subtitle">组合条件匹配</text>
+
+        <match-media :min-width="500" :max-width="1000" orientation="landscape">
+          <view class="demo-box">横屏 且宽度在 500px ~ 1000px 时显示</view>
+        </match-media>
+
+        <match-media :min-height="200" :max-height="800" orientation="portrait">
+          <view class="demo-box">竖屏 且高度在 200px ~ 800px 时显示</view>
+        </match-media>
+
+        <match-media :min-width="300" :max-width="900" :min-height="400" :max-height="800" orientation="portrait">
+          <view class="demo-box">竖屏 且宽度在 300px ~ 900px，高度在 400px ~ 800px 时显示</view>
+        </match-media>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+  .container {
+    padding: 20px;
+  }
+
+  .section {
+    padding-top: 5px;
+  }
+
+  .subtitle {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .demo-box {
+    padding: 5px 0;
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.match-media)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/match-media.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=match-media&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=match-media&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=match-media&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=match-media&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=match-media)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=match-media&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)

package/data/uniappx/component/movable-area.md

@@ -0,0 +1,37 @@
+::: sourceCode
+## movable-area
+
+movable-view 的可移动区域
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+
+之所以有movable-area和movable-view，是因为逻辑层和视图层分离，从视图层发送数据给逻辑层，处理后再传回视图层会产生损耗，导致拖动卡顿。
+
+于是通过一个框架实现好的组件，在视图层内部处理拖动，避免来回通信。
+
+在uni-app和小程序上确实存在这个问题，但在uni-app x的web和app上其实都不存在通信损耗。
+
+在hello uni-app x里有示例，可以自由的监听view的拖动并移动其位置。[详见](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/component/general-event/touch-event.uvue)
+
+### 属性 
+| 名称 | 类型 | 兼容性 | 描述 |
+| :- | :- |  :-: | :- |
+| scale-area | boolean | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Boolean)*<br/>当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area |
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.view-container.movable.movable-area)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/movable-area.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=movable-area&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=movable-area&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=movable-area&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=movable-area&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=movable-area)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=movable-area&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)