# 地图组件
iOS使用地图组件需要集成扩展SDK/MapSDK（系统地图使用扩展SDK，第三方地图使用MapSDK）
iOS集成扩展SDK/MapSDK请参考「小程序 SDK-iOS SDK-iOS 集成」
Android使用地图组件需要集成MapSDK
Android集成MapSDK请参考「小程序 SDK-Android SDK-Android 集成-6. MapSDK」
# 系统地图(仅iOS、Harmony支持)
| 属性 | 类型 | 默认值 | 必填 | 说明 | 支持度 |
|---|---|---|---|---|---|
| longitude | number | 116.46 | 是 | 中心经度 | iOS:✅ Harmony:✅ |
| latitude | number | 39.92 | 是 | 中心纬度 | iOS:✅ Harmony:✅ |
| scale | number | 16 | 否 | 缩放级别，取值范围为3-20 | iOS:✅ Harmony:✅ |
| min-scale | number | 3 | 否 | 最小缩放级别（手势进行缩放时，不收这个属性控制） | iOS:✅ Harmony:✅ |
| max-scale | number | 20 | 否 | 最大缩放级别（手势进行缩放时，不收这个属性控制） | iOS:✅ Harmony:✅ |
| markers | Array.marker | 否 | 标记点 | iOS:✅ Harmony:✅ | |
| polyline | Array.polyline | 否 | 路线 | iOS:✅ Harmony:✅ | |
| circles | Array.circle | 否 | 圆 | iOS:✅ Harmony:✅ | |
| controls | Array.control | 否 | 控件（即将废弃，建议使用 cover-view 代替） | iOS:❌ Harmony:❌ | |
| include-points | Array.point | 否 | 缩放视野以包含所有给定的坐标点 | iOS:✅ Harmony:✅ | |
| show-location | boolean | false | 否 | 显示带有方向的当前定位点 | iOS:✅ Harmony:✅ |
| polygons | Array.polygon | 否 | 多边形 | iOS:✅ Harmony:✅ | |
| subkey | - | 否 | 个性化地图暂不支持 | iOS:❌ Harmony:❌ | |
| layer-style | - | 否 | 个性化地图暂不支持 | iOS:❌ Harmony:❌ | |
| rotate | number | 0 | 否 | 旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 | iOS:❌ Harmony:✅ |
| skew | number | 0 | 否 | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 | iOS:❌ Harmony:✅ |
| enable-3D | boolean | false | 否 | 展示3D楼块 | iOS:❌ Harmony:✅ |
| show-compass | boolean | false | 否 | 显示指南针 | iOS:✅ Harmony:✅ |
| show-scale | boolean | false | 否 | 显示比例尺 | iOS:✅ Harmony:✅ |
| enable-overlooking | boolean | false | 否 | 开启俯视 | iOS:✅ Harmony:✅ |
| enable-zoom | boolean | true | 否 | 是否支持缩放 | iOS:✅ Harmony:✅ |
| enable-scroll | boolean | true | 否 | 是否支持拖动 | iOS:✅ Harmony:✅ |
| enable-rotate | boolean | false | 否 | 是否支持旋转 | iOS:✅ Harmony:✅ |
| enable-satellite | boolean | false | 否 | 是否开启卫星图 | iOS:✅ Harmony:❌ |
| enable-traffic | boolean | false | 否 | 是否开启实时路况 | iOS:✅ Harmony:✅ |
| enable-poi | boolean | true | 否 | 是否展示 POI 点 | iOS:✅ Harmony:❌ |
| enable-building | boolean | 否 | 是否展示建筑物 | iOS:✅ Harmony:❌ | |
| setting | object | 否 | 配置项 setting内容与属性配置冲突时，以setting的为准 | iOS:✅ Harmony:✅ | |
| bindtap | eventhandle | 否 | 点击地图时触发，返回经纬度信息 | iOS:❌ Harmony:✅ | |
| bindmarkertap | eventhandle | 否 | 点击标记点时触发，e.detail = {markerId} | iOS:❌ Harmony:✅ | |
| bindlabeltap | eventhandle | 否 | 点击label时触发，e.detail = {markerId} | iOS:❌ Harmony:❌ | |
| bindcontroltap | eventhandle | 否 | 点击控件时触发，e.detail = {controlId} | iOS:❌ Harmony:❌ | |
| bindcallouttap | eventhandle | 否 | 点击标记点对应的气泡时触发e.detail = {markerId} | iOS:❌ Harmony:❌ | |
| bindupdated | eventhandle | 否 | 在地图渲染更新完成时触发。(Harmony：只在地图加载完成触发一次) | iOS:❌ Harmony:✅ | |
| bindregionchange | eventhandle | 否 | 视野发生变化时触发 (Harmony：causeBy 不一定准确) | iOS:❌ Harmony:✅ | |
| bindpoitap | eventhandle | 否 | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | iOS:❌ Harmony:✅ | |
| bindpolylinetap | eventhandle | 否 | 点击地图路线时触发，e.detail = {longitude, latitude}(Harmony：返回的是第一个点的经纬度) | iOS:❌ Harmony:✅ | |
| bindanchorpointtap | eventhandle | 否 | 点击定位标时触发，e.detail = {longitude, latitude} | iOS:❌ Harmony:✅ |
# marker
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 标记点 id | number | 否 | marker 点击事件回调会返回此 id。 | iOS:✅ Harmony:✅ |
| clusterId | 聚合簇的 id | number | 否 | 自定义点聚合簇效果时使用 | iOS:✅ Harmony:❌ |
| joinCluster | 是否参与点聚合 | Boolean | 否 | 默认不参与点聚合 | iOS:❌ Harmony:❌ |
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | iOS:✅ Harmony:✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | iOS:✅ Harmony:✅ |
| title | 标注点名 | string | 否 | 点击时显示，callout存在时将被忽略 | iOS:✅ Harmony:✅ |
| zIndex | 显示层级 | number | 否 | iOS:❌ Harmony:✅ | |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持网络路径、本地路径、代码包路径 | iOS:✅ Harmony:✅ |
| rotate | 旋转角度 | number | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 | iOS:❌ Harmony:✅ |
| alpha | 标注的透明度 | number | 否 | 默认 1，无透明，范围 0 ~ 1 | iOS:❌ Harmony:✅ |
| width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 | iOS:❌ Harmony:❌ |
| height | 标记点 | number | 否 | 默认为图片实际高度 | iOS:❌ Harmony:❌ |
| callout | 标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 | iOS:✅ Harmony:✅ |
| customCallout | 标记点 | object | 否 | iOS:❌ Harmony:✅ | |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表，可识别换行符。 | iOS:❌ Harmony:✅ |
| anchor | 经纬度在标注图标的锚点，默认底边中点 | Object | 否 | {x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | iOS:❌ Harmony:✅ |
| aria-label | 无障碍访问，（属性）元素的额外描述 | string | 否 | iOS:❌ Harmony:❌ |
# marker 上的气泡 callout
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | iOS:✅ Harmony:✅ | |
| color | 文本颜色 | string | iOS:❌ Harmony:✅ | |
| fontSize | 文字大小 | number | iOS:❌ Harmony:✅ | |
| borderRadius | 边框圆角 | number | iOS:❌ Harmony:✅ | |
| borderWidth | 边框宽度 | string | iOS:❌ Harmony:✅ | |
| borderColor | 边框颜色 | string | iOS:❌ Harmony:✅ | |
| bgColor | 背景色 | string | iOS:❌ Harmony:✅ | |
| padding | 文本边缘留白 | number | iOS:❌ Harmony:✅ | |
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | iOS:❌ Harmony:❌ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | iOS:❌ Harmony:✅ | |
| anchorX | 横向偏移量，向右为正数 | number | iOS:❌ Harmony:✅ | |
| anchorY | 纵向偏移量，向下为正数 | number | iOS:❌ Harmony:✅ |
# marker 上的气泡 customCallout
customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | iOS:❌ Harmony:❌ | |
| anchorX | 横向偏移量，向右为正数 | number | iOS:❌ Harmony:✅ | |
| anchorY | 纵向偏移量，向下为正数 | number | iOS:❌ Harmony:✅ |
使用方式如下，map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时，该 cover-view 显示的内容将作为 callout 显示在标记点上方。
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
<cover-view marker-id="3"></cover-view>
</cover-view>
</map>
# marker 上的气泡 label
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | iOS:✅ Harmony:✅ | |
| color | 文本颜色 | string | iOS:❌ Harmony:✅ | |
| fontSize | 文字大小 | number | iOS:❌ Harmony:✅ | |
| anchorX | label的坐标，原点是 marker 对应的经纬度 | number | iOS:❌ Harmony:❌ | |
| anchorY | label的坐标，原点是 marker 对应的经纬度 | number | iOS:❌ Harmony:❌ | |
| borderWidth | 边框宽度 | number | iOS:❌ Harmony:❌ | |
| borderColor | 边框颜色 | string | iOS:❌ Harmony:❌ | |
| borderRadius | 边框圆角 | number | iOS:❌ Harmony:❌ | |
| bgColor | 背景色 | string | iOS:❌ Harmony:❌ | |
| padding | 文本边缘留白 | number | iOS:❌ Harmony:❌ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | iOS:❌ Harmony:❌ |
# polyline
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | iOS:✅ Harmony:✅ |
| color | 线的颜色 | string | 否 | 十六进制 | iOS:✅ Harmony:✅ |
| colorList | 彩虹线 | array | 否 | 存在时忽略 color 值 | iOS:❌ Harmony:✅ |
| width | 线的宽度 | number | 否 | iOS:✅ Harmony:✅ | |
| dottedLine | 是否虚线 | boolean | 否 | 默认 false | iOS:❌ Harmony:✅ |
| arrowLine | 带箭头的线 | boolean | 否 | 默认 false | iOS:❌ Harmony:❌ |
| arrowIconPath | 更换箭头图标 | string | 否 | 在 arrowLine 为 true 时生效 | iOS:❌ Harmony:❌ |
| borderColor | 线的边框颜色 | string | 否 | iOS:❌ Harmony:❌ | |
| borderWidth | 线的厚度 | number | 否 | iOS:❌ Harmony:❌ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:❌ Harmony:❌ |
# polygon
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | iOS:✅ Harmony:✅ |
| strokeWidth | 描边的宽度 | number | 否 | iOS:✅ Harmony:✅ | |
| strokeColor | 描边的颜色 | string | 否 | 十六进制 | iOS:✅ Harmony:✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | iOS:✅ Harmony:✅ |
| dashArray | 边线虚线 | Array<number> | 否 | 默认值 [0, 0] 为实线，[10, 10]表示十个像素的实线和十个像素的空白（如此反复）组成的虚线 | iOS:❌ Harmony:✅ |
| zIndex | 设置多边形Z轴数值 | number | 否 | iOS:✅ Harmony:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:❌ Harmony:❌ |
# circle
| 属性 | 说明 | 类型 | 必填 | 备注 | 其他 |
|---|---|---|---|---|---|
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | iOS:✅ Harmony:✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | iOS:✅ Harmony:✅ |
| color | 描边的颜色 | string | 否 | 十六进制 | iOS:✅ Harmony:✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | iOS:✅ Harmony:✅ |
| radius | 半径 | number | 是 | iOS:✅ Harmony:✅ | |
| strokeWidth | 描边的宽度 | number | 否 | iOS:✅ Harmony:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:❌ Harmony:❌ |
# control
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 控件id | number | 否 | 在控件点击事件回调会返回此id | ❌ |
| position | 控件在地图的位置 | object | 是 | 控件相对地图位置 | ❌ |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持本地路径、代码包路径 | ❌ |
| clickable | 是否可点击 | boolean | 否 | 默认不可点击 | ❌ |
# position
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| left | 距离地图的左边界多远 | number | 否 | 默认为0 | ❌ |
| top | 距离地图的上边界多远 | number | 否 | 默认为0 | ❌ |
| width | 控件宽度 | number | 否 | 默认为0 | ❌ |
| height | 控件高度 | number | 否 | 默认为0 | ❌ |
# 高德地图
高德地图最多允许有10个map对象
当超过10个map地图对象时，地图内容会显示黑屏。所以，当使用高德地图来实现map组件(即依赖高德地图扩展SDK)时，需要小程序在页面的onHide()里移除销毁map，然后在onShow()里创建地图和添加地图内容。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 支持度 |
|---|---|---|---|---|---|
| longitude | number | 116.46 | 是 | 中心经度 | iOS:✅ Android:✅ IDE:✅ |
| latitude | number | 39.92 | 是 | 中心纬度 | iOS:✅ Android:✅ IDE:✅ |
| scale | number | 16 | 否 | 缩放级别，取值范围为3-20 | iOS:✅ Android:✅ IDE:✅ |
| min-scale | number | 3 | 否 | 最小缩放级别 | iOS:✅ Android:✅ IDE:✅ 不支持动态修改 |
| max-scale | number | 20 | 否 | 最大缩放级别 | iOS:✅ Android:✅ IDE:✅ 不支持动态修改 |
| markers | Array.marker | 否 | 标记点 | iOS:✅ Android:✅ IDE:✅ | |
| polyline | Array.polyline | 否 | 路线 | iOS:✅ Android:✅ IDE:✅ | |
| circles | Array.circle | 否 | 圆 | iOS:✅ Android:✅ IDE:✅ | |
| controls | Array.control | 否 | 控件（即将废弃，建议使用 cover-view 代替） | iOS:❌ Android:❌ IDE:✅ | |
| include-points | Array.point | 否 | 缩放视野以包含所有给定的坐标点 | iOS:✅ Android:✅ IDE:❌ | |
| show-location | boolean | false | 否 | 显示带有方向的当前定位点 | iOS:✅ Android:✅ IDE:❌ |
| polygons | Array.polygon | 否 | 多边形 | iOS:✅ Android:✅ IDE:✅ | |
| subkey | - | 否 | 个性化地图暂不支持 | iOS:❌ Android:❌ IDE:❌ | |
| layer-style | - | 否 | 个性化地图暂不支持 | iOS:❌ Android:❌ IDE:❌ | |
| rotate | number | 0 | 否 | 旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 | iOS:✅ Android:✅ IDE:✅ |
| skew | number | 0 | 否 | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 | iOS:✅ Android:✅ IDE:✅ |
| enable-3D | boolean | false | 否 | 展示3D楼块 | iOS:❌ Android:❌ IDE:❌ |
| show-compass | boolean | false | 否 | 显示指南针 | iOS:✅ Android:✅ IDE:❌ |
| show-scale | boolean | false | 否 | 显示比例尺 | iOS:✅ Android:✅ IDE:✅ |
| enable-overlooking | boolean | false | 否 | 开启俯视 | iOS:✅ Android:✅ IDE:❌ |
| enable-zoom | boolean | true | 否 | 是否支持缩放 | iOS:✅ Android:✅ IDE:✅ |
| enable-scroll | boolean | true | 否 | 是否支持拖动 | iOS:✅ Android:✅ IDE:✅ |
| enable-rotate | boolean | false | 否 | 是否支持旋转 | iOS:✅ Android:✅ IDE:✅ |
| enable-satellite | boolean | false | 否 | 是否开启卫星图 | iOS:✅ Android:✅ IDE:✅ |
| enable-traffic | boolean | false | 否 | 是否开启实时路况 | iOS:✅ Android:✅ IDE:✅ |
| enable-poi | boolean | true | 否 | 是否展示 POI 点 | iOS:❌ Android:✅ IDE:✅ |
| enable-building | boolean | 否 | 是否展示建筑物 | iOS:✅ Android:✅ IDE:✅ | |
| setting | object | 否 | 配置项 setting内容与属性配置冲突时，以setting的为准 | iOS:✅ Android:✅ IDE:✅ | |
| bindtap | eventhandle | 否 | 点击地图时触发，返回经纬度信息 | iOS:✅ Android:✅ IDE:✅ | |
| bindmarkertap | eventhandle | 否 | 点击标记点时触发，e.detail = {markerId} | iOS:✅ Android:✅ IDE:✅ | |
| bindlabeltap | eventhandle | 否 | 点击label时触发，e.detail = {markerId} | iOS:❌ Android:❌ IDE:❌ | |
| bindcontroltap | eventhandle | 否 | 点击控件时触发，e.detail = {controlId} | iOS:❌ Android:❌ IDE:✅ | |
| bindcallouttap | eventhandle | 否 | 点击标记点对应的气泡时触发e.detail = {markerId} | iOS:✅ Android:✅ IDE:❌ | |
| bindupdated | eventhandle | 否 | 在地图渲染更新完成时触发 | iOS:✅ 仅在地图加载完成时触发 Android:✅ 仅在地图加载完成时触发 IDE:❌ | |
| bindregionchange | eventhandle | 否 | 视野发生变化时触发 | iOS:✅ Android:✅ IDE:✅ | |
| bindpoitap | eventhandle | 否 | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | iOS:✅ Android:✅ IDE:❌ | |
| bindanchorpointtap | eventhandle | 否 | 点击定位标时触发，e.detail = {longitude, latitude} | iOS:✅ Android:✅ IDE:❌ |
# marker
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 标记点 id | number | 否 | marker 点击事件回调会返回此 id。 | iOS:✅ Android:✅ IDE:✅ |
| clusterId | 聚合簇的 id | number | 否 | 自定义点聚合簇效果时使用 | iOS:❌ Android:✅ IDE:❌ |
| joinCluster | 是否参与点聚合 | Boolean | 否 | 默认不参与点聚合 | iOS:❌ Android:✅ IDE:❌ |
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | iOS:✅ Android:✅ IDE:✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | iOS:✅ Android:✅ IDE:✅ |
| title | 标注点名 | string | 否 | 点击时显示，callout存在时将被忽略 | iOS:✅ Android:✅ IDE:✅ |
| zIndex | 显示层级 | number | 否 | iOS:✅ Android:✅ IDE:✅ | |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持网络路径、本地路径、代码包路径 | iOS:✅ Android:✅ IDE:✅ |
| rotate | 旋转角度 | number | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 | iOS:❌ Android:✅ IDE:✅ |
| alpha | 标注的透明度 | number | 否 | 默认 1，无透明，范围 0 ~ 1 | iOS:❌ Android:✅ IDE:✅ |
| width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 | iOS:✅ Android:✅ IDE:✅ |
| height | 标记点 | number | 否 | 默认为图片实际高度 | iOS:✅ Android:✅ IDE:✅ |
| callout | 标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 | iOS:✅ Android:✅ IDE:✅ |
| customCallout | 标记点 | number | 否 | iOS:✅ Android:✅ IDE:❌ | |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表，可识别换行符。 | iOS:❌ Android:❌ IDE:✅ |
| anchor | 经纬度在标注图标的锚点，默认底边中点 | Object | 否 | {x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | iOS:❌ Android:✅ IDE:✅ |
| aria-label | 无障碍访问，（属性）元素的额外描述 | string | 否 | iOS:❌ Android:❌ IDE:❌ | |
| displayWithCallout | 是否将 callout/customCallout/title 作为 marker 图标展示 | Boolean | 否 | 将 callout/customCallout/title 作为 marker 图标展示，使得 callout/customCallout/title 可以常显 | iOS:✅ Android:✅ IDE:❌ |
# marker 上的气泡 callout
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | iOS:✅ Android:✅ IDE:✅ | |
| color | 文本颜色 | string | iOS:✅ Android:✅ IDE:❌ | |
| fontSize | 文字大小 | number | iOS:✅ Android:✅ IDE:❌ | |
| borderRadius | 边框圆角 | number | iOS:✅ Android:✅ IDE:✅ | |
| borderWidth | 边框宽度 | string | iOS:✅ Android:✅ IDE:❌ | |
| borderColor | 边框颜色 | string | iOS:✅ Android:✅ IDE:❌ | |
| bgColor | 背景色 | string | iOS:✅ Android:✅ IDE:❌ | |
| padding | 文本边缘留白 | number | iOS:✅ Android:✅ IDE:❌ | |
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | iOS:✅ Android:(不支持ALWAYS)✅ IDE:❌ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | iOS:✅ Android:✅ IDE:❌ | |
| anchorX | 横向偏移量，向右为正数 | number | iOS:✅ Android:✅ IDE:❌ | |
| anchorY | 纵向偏移量，向下为正数 | number | iOS:✅ Android:✅ IDE:❌ |
# marker 上的气泡 customCallout
customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | iOS:✅ Android:(不支持ALWAYS)✅ IDE:❌ | |
| anchorX | 横向偏移量，向右为正数 | number | iOS:✅ Android:✅ IDE:❌ | |
| anchorY | 纵向偏移量，向下为正数 | number | iOS:✅ Android:✅ IDE:❌ |
使用方式如下，map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时，该 cover-view 显示的内容将作为 callout 显示在标记点上方。
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
<cover-view marker-id="3"></cover-view>
</cover-view>
</map>
# marker 上的气泡 label
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | iOS:❌ Android:❌ IDE:✅ | |
| color | 文本颜色 | string | iOS:❌ Android:❌ IDE:❌ | |
| fontSize | 文字大小 | number | iOS:❌ Android:❌ IDE:❌ | |
| anchorX | label的坐标，原点是 marker 对应的经纬度 | number | iOS:❌ Android:❌ IDE:❌ | |
| anchorY | label的坐标，原点是 marker 对应的经纬度 | number | iOS:❌ Android:❌ IDE:❌ | |
| borderWidth | 边框宽度 | number | iOS:❌ Android:❌ IDE:❌ | |
| borderColor | 边框颜色 | string | iOS:❌ Android:❌ IDE:❌ | |
| borderRadius | 边框圆角 | number | iOS:❌ Android:❌ IDE:❌ | |
| bgColor | 背景色 | string | iOS:❌ Android:❌ IDE:❌ | |
| padding | 文本边缘留白 | number | iOS:❌ Android:❌ IDE:❌ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | iOS:❌ Android:❌ IDE:❌ |
# polyline
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ IDE:✅ |
| color | 线的颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ IDE:✅ |
| colorList | 彩虹线 | array | 否 | 存在时忽略 color 值 | iOS:❌ Android:✅ IDE:❌ |
| width | 线的宽度 | number | 否 | iOS:✅ Android:✅ IDE:✅ | |
| dottedLine | 是否虚线 | boolean | 否 | 默认 false | iOS:❌ Android:✅ IDE:✅ |
| arrowLine | 带箭头的线 | boolean | 否 | 默认 false | iOS:❌ Android:✅ IDE:✅ |
| arrowIconPath | 更换箭头图标 | string | 否 | 在 arrowLine 为 true 时生效 | iOS:✅ Android:✅ IDE:✅ |
| borderColor | 线的边框颜色 | string | 否 | iOS:❌ Android:❌ IDE:✅ | |
| borderWidth | 线的厚度 | number | 否 | iOS:❌ Android:❌ IDE:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:❌ Android:✅ aboveroads等效于abovebuildings IDE:✅ |
# polygon
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ IDE:✅ |
| strokeWidth | 描边的宽度 | number | 否 | iOS:✅ Android:✅ IDE:✅ | |
| strokeColor | 描边的颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ IDE:✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ IDE:✅ |
| zIndex | 设置多边形Z轴数值 | number | 否 | iOS:✅ Android:✅ IDE:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:❌ Android:✅ aboveroads等效于abovebuildings IDE:✅ |
# circle
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | iOS:✅ Android:✅ IDE:✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | iOS:✅ Android:✅ IDE:✅ |
| color | 描边的颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ IDE:✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ IDE:✅ |
| radius | 半径 | number | 是 | iOS:✅ Android:✅ IDE:✅ | |
| strokeWidth | 描边的宽度 | number | 否 | iOS:✅ Android:✅ IDE:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:❌ Android:✅ aboveroads等效于abovebuildings IDE:✅ |
# control
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 控件id | number | 否 | 在控件点击事件回调会返回此id | iOS:❌ Android:❌ IDE:✅ |
| position | 控件在地图的位置 | object | 是 | 控件相对地图位置 | iOS:❌ Android:❌ IDE:✅ |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持本地路径、代码包路径 | iOS:❌ Android:❌ IDE:✅ |
| clickable | 是否可点击 | boolean | 否 | 默认不可点击 | iOS:❌ Android:❌ IDE:✅ |
# position
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| left | 距离地图的左边界多远 | number | 否 | 默认为0 | iOS:❌ Android:❌ IDE:✅ |
| top | 距离地图的上边界多远 | number | 否 | 默认为0 | iOS:❌ Android:❌ IDE:✅ |
| width | 控件宽度 | number | 否 | 默认为0 | iOS:❌ Android:❌ IDE:✅ |
| height | 控件高度 | number | 否 | 默认为0 | iOS:❌ Android:❌ IDE:✅ |
# 百度地图(仅iOS、Android支持)
| 属性 | 类型 | 默认值 | 必填 | 说明 | 支持度 |
|---|---|---|---|---|---|
| longitude | number | 116.46 | 是 | 中心经度 | iOS:✅ Android:✅ |
| latitude | number | 39.92 | 是 | 中心纬度 | iOS:✅ Android:✅ |
| scale | number | 16 | 否 | 缩放级别，取值范围为3-20 | iOS:✅ Android:✅ |
| min-scale | number | 3 | 否 | 最小缩放级别 | iOS:✅ Android:✅ |
| max-scale | number | 20 | 否 | 最大缩放级别 | iOS:✅ Android:✅ |
| markers | Array.marker | 否 | 标记点 | iOS:✅ Android:✅ | |
| polyline | Array.polyline | 否 | 路线 | iOS:✅ Android:✅ | |
| circles | Array.circle | 否 | 圆 | iOS:✅ Android:✅ | |
| controls | Array.control | 否 | 控件（即将废弃，建议使用 cover-view 代替） | iOS:❌ Android:❌ | |
| include-points | Array.point | 否 | 缩放视野以包含所有给定的坐标点 | iOS:✅ Android:✅ | |
| show-location | boolean | false | 否 | 显示带有方向的当前定位点 | iOS:✅ Android:✅ |
| polygons | Array.polygon | 否 | 多边形 | iOS:✅ Android:✅ | |
| subkey | - | 否 | 个性化地图暂不支持 | iOS:❌ Android:❌ | |
| layer-style | - | 否 | 个性化地图暂不支持 | iOS:❌ Android:❌ | |
| rotate | number | 0 | 否 | 旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 | iOS:✅ Android:✅ |
| skew | number | 0 | 否 | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 | iOS:✅ Android:✅ |
| enable-3D | boolean | false | 否 | 展示3D楼块 | iOS:✅ Android:✅ |
| show-compass | boolean | false | 否 | 显示指南针(iOS默认开启，不支持关闭) | iOS:✅ Android:✅ |
| show-scale | boolean | false | 否 | 显示比例尺 | iOS:✅ Android:✅ |
| enable-overlooking | boolean | false | 否 | 开启俯视 | iOS:✅ Android:✅ |
| enable-zoom | boolean | true | 否 | 是否支持缩放 | iOS:✅ Android:✅ |
| enable-scroll | boolean | true | 否 | 是否支持拖动 | iOS:✅ Android:✅ |
| enable-rotate | boolean | false | 否 | 是否支持旋转 | iOS:✅ Android:✅ |
| enable-satellite | boolean | false | 否 | 是否开启卫星图 | iOS:✅ Android:✅ |
| enable-traffic | boolean | false | 否 | 是否开启实时路况 | iOS:✅ Android:✅ |
| enable-poi | boolean | true | 否 | 是否展示 POI 点 | iOS:✅ Android:✅ |
| enable-building | boolean | 否 | 是否展示建筑物 | iOS:❌ Android:❌ | |
| setting | object | 否 | 配置项 setting内容与属性配置冲突时，以setting的为准 | iOS:✅ Android:✅ | |
| bindtap | eventhandle | 否 | 点击地图时触发，返回经纬度信息 | iOS:✅ Android:✅ | |
| bindmarkertap | eventhandle | 否 | 点击标记点时触发，e.detail = {markerId} | iOS:✅ Android:✅ | |
| bindlabeltap | eventhandle | 否 | 点击label时触发，e.detail = {markerId} | iOS:❌ Android:❌ | |
| bindcontroltap | eventhandle | 否 | 点击控件时触发，e.detail = {controlId} | iOS:❌ Android:❌ | |
| bindcallouttap | eventhandle | 否 | 点击标记点对应的气泡时触发e.detail = {markerId} | iOS:✅ Android:✅ | |
| bindupdated | eventhandle | 否 | 在地图渲染更新完成时触发 | iOS:✅ 仅在地图加载完成时触发 Android:✅ 仅在地图加载完成时触发 | |
| bindregionchange | eventhandle | 否 | 视野发生变化时触发 | iOS:✅ Android:✅ | |
| bindpoitap | eventhandle | 否 | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | iOS:✅ Android:✅ | |
| bindanchorpointtap | eventhandle | 否 | 点击定位标时触发，e.detail = {longitude, latitude} | iOS:✅ Android:✅ |
# marker
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 标记点 id | number | 否 | marker 点击事件回调会返回此 id。 | iOS:✅ Android:✅ |
| clusterId | 聚合簇的 id | number | 否 | 自定义点聚合簇效果时使用 | iOS:✅ Android:✅ |
| joinCluster | 是否参与点聚合 | Boolean | 否 | 默认不参与点聚合 | iOS:❌ Android:✅ |
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | iOS:✅ Android:✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | iOS:✅ Android:✅ |
| title | 标注点名 | string | 否 | 点击时显示，callout存在时将被忽略 | iOS:✅ Android:✅ |
| zIndex | 显示层级 | number | 否 | iOS:✅ Android:✅ | |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持网络路径、本地路径、代码包路径 | iOS:✅ Android:✅ |
| rotate | 旋转角度 | number | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 | iOS:❌ Android:✅ |
| alpha | 标注的透明度 | number | 否 | 默认 1，无透明，范围 0 ~ 1 | iOS:❌ Android:✅ |
| width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 | iOS:✅ Android:✅ |
| height | 标记点 | number | 否 | 默认为图片实际高度 | iOS:✅ Android:✅ |
| callout | 标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 | iOS:✅ Android:✅ |
| customCallout | 标记点 | object | 否 | iOS:✅ Android:✅ | |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表，可识别换行符。 | iOS:❌ Android:❌ |
| anchor | 经纬度在标注图标的锚点，默认底边中点 | Object | 否 | {x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | iOS:✅ Android:✅ |
| aria-label | 无障碍访问，（属性）元素的额外描述 | string | 否 | iOS:❌ Android:❌ | |
| displayWithCallout | 是否将 callout/customCallout/title 作为 marker 图标展示 | Boolean | 否 | 将 callout/customCallout/title 作为 marker 图标展示，使得 callout/customCallout/title 可以常显 | iOS:✅ Android:✅ IDE:❌ |
# marker 上的气泡 callout
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | iOS:✅ Android:✅ | |
| color | 文本颜色 | string | iOS:✅ Android:✅ | |
| fontSize | 文字大小 | number | iOS:✅ Android:✅ | |
| borderRadius | 边框圆角 | number | iOS:✅ Android:✅ | |
| borderWidth | 边框宽度 | string | iOS:✅ Android:✅ | |
| borderColor | 边框颜色 | string | iOS:✅ Android:✅ | |
| bgColor | 背景色 | string | iOS:✅ Android:✅ | |
| padding | 文本边缘留白 | number | iOS:✅ Android:✅ | |
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | iOS:✅ Android:✅ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | iOS:✅ Android:✅ | |
| anchorX | 横向偏移量，向右为正数 | number | iOS:✅ Android:❌ | |
| anchorY | 纵向偏移量，向下为正数 | number | iOS:✅ Android:✅ |
# marker 上的气泡 customCallout
customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | iOS:✅ Android:✅ | |
| anchorX | 横向偏移量，向右为正数 | number | iOS:✅ Android:❌ | |
| anchorY | 纵向偏移量，向下为正数 | number | iOS:✅ Android:✅ |
使用方式如下，map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时，该 cover-view 显示的内容将作为 callout 显示在标记点上方。
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
<cover-view marker-id="3"></cover-view>
</cover-view>
</map>
# marker 上的气泡 label
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | iOS:❌ Android:❌ | |
| color | 文本颜色 | string | iOS:❌ Android:❌ | |
| fontSize | 文字大小 | number | iOS:❌ Android:❌ | |
| anchorX | label的坐标，原点是 marker 对应的经纬度 | number | iOS:❌ Android:❌ | |
| anchorY | label的坐标，原点是 marker 对应的经纬度 | number | iOS:❌ Android:❌ | |
| borderWidth | 边框宽度 | number | iOS:❌ Android:❌ | |
| borderColor | 边框颜色 | string | iOS:❌ Android:❌ | |
| borderRadius | 边框圆角 | number | iOS:❌ Android:❌ | |
| bgColor | 背景色 | string | iOS:❌ Android:❌ | |
| padding | 文本边缘留白 | number | iOS:❌ Android:❌ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | iOS:❌ Android:❌ |
# polyline
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ |
| color | 线的颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| colorList | 彩虹线 | array | 否 | 存在时忽略 color 值 | iOS:✅ Android:✅ |
| width | 线的宽度 | number | 否 | iOS:✅ Android:✅ | |
| dottedLine | 是否虚线 | boolean | 否 | 默认 false | iOS:❌ Android:✅ |
| arrowLine | 带箭头的线 | boolean | 否 | 默认 false | iOS:❌ Android:✅ |
| arrowIconPath | 更换箭头图标 | string | 否 | 在 arrowLine 为 true 时生效 | iOS:✅ Android:✅ |
| borderColor | 线的边框颜色 | string | 否 | iOS:❌ Android:❌ | |
| borderWidth | 线的厚度 | number | 否 | iOS:❌ Android:❌ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:❌ Android:❌ |
# polygon
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ |
| strokeWidth | 描边的宽度 | number | 否 | iOS:✅ Android:✅ | |
| strokeColor | 描边的颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| zIndex | 设置多边形Z轴数值 | number | 否 | iOS:✅ Android:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:❌ Android:❌ |
# circle
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | iOS:✅ Android:✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | iOS:✅ Android:✅ |
| color | 描边的颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| radius | 半径 | number | 是 | iOS:✅ Android:✅ | |
| strokeWidth | 描边的宽度 | number | 否 | iOS:✅ Android:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:❌ Android:❌ |
# control
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 控件id | number | 否 | 在控件点击事件回调会返回此id | iOS:❌ Android:❌ |
| position | 控件在地图的位置 | object | 是 | 控件相对地图位置 | iOS:❌ Android:❌ |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持本地路径、代码包路径 | iOS:❌ Android:❌ |
| clickable | 是否可点击 | boolean | 否 | 默认不可点击 | iOS:❌ Android:❌ |
# position
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| left | 距离地图的左边界多远 | number | 否 | 默认为0 | iOS:❌ Android:❌ |
| top | 距离地图的上边界多远 | number | 否 | 默认为0 | iOS:❌ Android:❌ |
| width | 控件宽度 | number | 否 | 默认为0 | iOS:❌ Android:❌ |
| height | 控件高度 | number | 否 | 默认为0 | iOS:❌ Android:❌ |
# 腾讯地图(仅iOS、Android支持)
| 属性 | 类型 | 默认值 | 必填 | 说明 | 支持度 |
|---|---|---|---|---|---|
| longitude | number | 116.46 | 是 | 中心经度 | iOS:✅ Android:✅ |
| latitude | number | 39.92 | 是 | 中心纬度 | iOS:✅ Android:✅ |
| scale | number | 16 | 否 | 缩放级别，取值范围为3-20 | iOS:✅ Android:✅ |
| min-scale | number | 3 | 否 | 最小缩放级别 | iOS:✅ Android:✅ |
| max-scale | number | 20 | 否 | 最大缩放级别 | iOS:✅ Android:✅ |
| markers | Array.marker | 否 | 标记点 | iOS:✅ Android:✅ | |
| polyline | Array.polyline | 否 | 路线 | iOS:✅ Android:✅ | |
| circles | Array.circle | 否 | 圆 | iOS:✅ Android:✅ | |
| controls | Array.control | 否 | 控件（即将废弃，建议使用 cover-view 代替） | iOS:❌ Android:❌ | |
| include-points | Array.point | 否 | 缩放视野以包含所有给定的坐标点 | iOS:✅ Android:✅ | |
| show-location | boolean | false | 否 | 显示带有方向的当前定位点 | iOS:✅ Android:✅ |
| polygons | Array.polygon | 否 | 多边形 | iOS:✅ Android:✅ | |
| subkey | - | 否 | 个性化地图暂不支持 | iOS:❌ Android:❌ | |
| layer-style | - | 否 | 个性化地图暂不支持 | iOS:❌ Android:❌ | |
| rotate | number | 0 | 否 | 旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 | iOS:✅ Android:✅ |
| skew | number | 0 | 否 | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 | iOS:✅ Android:✅ |
| enable-3D | boolean | false | 否 | 展示3D楼块 | iOS:✅ Android:✅ |
| show-compass | boolean | false | 否 | 显示指南针(iOS默认开启，不支持关闭) | iOS:✅ Android:✅ |
| show-scale | boolean | false | 否 | 显示比例尺 | iOS:✅ Android:✅ |
| enable-overlooking | boolean | false | 否 | 开启俯视 | iOS:✅ Android:✅ |
| enable-zoom | boolean | true | 否 | 是否支持缩放 | iOS:✅ Android:✅ |
| enable-scroll | boolean | true | 否 | 是否支持拖动 | iOS:✅ Android:✅ |
| enable-rotate | boolean | false | 否 | 是否支持旋转 | iOS:✅ Android:✅ |
| enable-satellite | boolean | false | 否 | 是否开启卫星图 | iOS:✅ Android:✅ |
| enable-traffic | boolean | false | 否 | 是否开启实时路况 | iOS:✅ Android:✅ |
| enable-poi | boolean | true | 否 | 是否展示 POI 点 | iOS:✅ Android:✅ |
| enable-building | boolean | 否 | 是否展示建筑物 | iOS:✅ Android:✅ | |
| setting | object | 否 | 配置项 setting内容与属性配置冲突时，以setting的为准 | iOS:✅ Android:✅ | |
| bindtap | eventhandle | 否 | 点击地图时触发，返回经纬度信息 | iOS:✅ Android:✅ | |
| bindmarkertap | eventhandle | 否 | 点击标记点时触发，e.detail = {markerId} | iOS:✅ Android:✅ | |
| bindlabeltap | eventhandle | 否 | 点击label时触发，e.detail = {markerId} | iOS:❌ Android:❌ | |
| bindcontroltap | eventhandle | 否 | 点击控件时触发，e.detail = {controlId} | iOS:❌ Android:❌ | |
| bindcallouttap | eventhandle | 否 | 点击标记点对应的气泡时触发e.detail = {markerId}(iOS仅首次点击时触发) | iOS:✅ Android:✅ | |
| bindupdated | eventhandle | 否 | 在地图渲染更新完成时触发 | iOS:✅ 仅在地图加载完成时触发 Android:✅ 仅在地图加载完成时触发 | |
| bindregionchange | eventhandle | 否 | 视野发生变化时触发 | iOS:✅ Android:✅ | |
| bindpoitap | eventhandle | 否 | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | iOS:✅ Android:✅ | |
| bindanchorpointtap | eventhandle | 否 | 点击定位标时触发，e.detail = {longitude, latitude} | iOS:✅ Android:✅ |
# marker
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 标记点 id | number | 否 | marker 点击事件回调会返回此 id。 | iOS:✅ Android:✅ |
| clusterId | 聚合簇的 id | number | 否 | 自定义点聚合簇效果时使用 | iOS:✅ Android:✅ |
| joinCluster | 是否参与点聚合 | Boolean | 否 | 默认不参与点聚合 | iOS:❌ Android:✅ |
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | iOS:✅ Android:✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | iOS:✅ Android:✅ |
| title | 标注点名 | string | 否 | 点击时显示，callout存在时将被忽略 | iOS:✅ Android:✅ |
| zIndex | 显示层级 | number | 否 | iOS:✅ Android:✅ | |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持网络路径、本地路径、代码包路径 | iOS:✅ Android:✅ |
| rotate | 旋转角度 | number | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 | iOS:✅ Android:✅ |
| alpha | 标注的透明度 | number | 否 | 默认 1，无透明，范围 0 ~ 1 | iOS:✅ Android:✅ |
| width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 | iOS:✅ Android:✅ |
| height | 标记点 | number | 否 | 默认为图片实际高度 | iOS:✅ Android:✅ |
| callout | 标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 | iOS:✅ Android:✅ |
| customCallout | 标记点 | object | 否 | iOS:✅ Android:✅ | |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表，可识别换行符。 | iOS:❌ Android:❌ |
| anchor | 经纬度在标注图标的锚点，默认底边中点 | Object | 否 | {x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | iOS:✅ Android:✅ |
| aria-label | 无障碍访问，（属性）元素的额外描述 | string | 否 | iOS:❌ Android:❌ | |
| displayWithCallout | 是否将 callout/customCallout/title 作为 marker 图标展示 | Boolean | 否 | 将 callout/customCallout/title 作为 marker 图标展示，使得 callout/customCallout/title 可以常显 | iOS:✅ Android:✅ IDE:❌ |
# marker 上的气泡 callout
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | iOS:✅ Android:✅ | |
| color | 文本颜色 | string | iOS:✅ Android:✅ | |
| fontSize | 文字大小 | number | iOS:✅ Android:✅ | |
| borderRadius | 边框圆角 | number | iOS:✅ Android:✅ | |
| borderWidth | 边框宽度 | string | iOS:✅ Android:✅ | |
| borderColor | 边框颜色 | string | iOS:✅ Android:✅ | |
| bgColor | 背景色 | string | iOS:✅ Android:✅ | |
| padding | 文本边缘留白 | number | iOS:✅ Android:✅ | |
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | iOS:✅ Android:✅ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | iOS:✅ Android:✅ | |
| anchorX | 横向偏移量，向右为正数 | number | iOS:✅ Android:✅ | |
| anchorY | 纵向偏移量，向下为正数 | number | iOS:✅ Android:✅ |
# marker 上的气泡 customCallout
customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | iOS:✅ Android:✅ | |
| anchorX | 横向偏移量，向右为正数 | number | iOS:✅ Android:✅ | |
| anchorY | 纵向偏移量，向下为正数 | number | iOS:✅ Android:✅ |
使用方式如下，map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时，该 cover-view 显示的内容将作为 callout 显示在标记点上方。
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
<cover-view marker-id="3"></cover-view>
</cover-view>
</map>
# marker 上的气泡 label
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | iOS:❌ Android:❌ | |
| color | 文本颜色 | string | iOS:❌ Android:❌ | |
| fontSize | 文字大小 | number | iOS:❌ Android:❌ | |
| anchorX | label的坐标，原点是 marker 对应的经纬度 | number | iOS:❌ Android:❌ | |
| anchorY | label的坐标，原点是 marker 对应的经纬度 | number | iOS:❌ Android:❌ | |
| borderWidth | 边框宽度 | number | iOS:❌ Android:❌ | |
| borderColor | 边框颜色 | string | iOS:❌ Android:❌ | |
| borderRadius | 边框圆角 | number | iOS:❌ Android:❌ | |
| bgColor | 背景色 | string | iOS:❌ Android:❌ | |
| padding | 文本边缘留白 | number | iOS:❌ Android:❌ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | iOS:❌ Android:❌ |
# polyline
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ |
| color | 线的颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| colorList | 彩虹线 | array | 否 | 存在时忽略 color 值 | iOS:✅ Android:✅ |
| width | 线的宽度 | number | 否 | iOS:✅ Android:✅ | |
| dottedLine | 是否虚线 | boolean | 否 | 默认 false | iOS:✅ Android:✅ |
| arrowLine | 带箭头的线 | boolean | 否 | 默认 false | iOS:✅ Android:✅ |
| arrowIconPath | 更换箭头图标 | string | 否 | 在 arrowLine 为 true 时生效 | iOS:✅ Android:✅ |
| borderColor | 线的边框颜色 | string | 否 | iOS:✅ Android:✅ | |
| borderWidth | 线的厚度 | number | 否 | iOS:✅ Android:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:✅ Android:✅ |
# polygon
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | iOS:✅ Android:✅ |
| strokeWidth | 描边的宽度 | number | 否 | iOS:✅ Android:✅ | |
| strokeColor | 描边的颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| zIndex | 设置多边形Z轴数值 | number | 否 | iOS:✅ Android:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:✅ Android:✅ |
# circle
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | iOS:✅ Android:✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | iOS:✅ Android:✅ |
| color | 描边的颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | iOS:✅ Android:✅ |
| radius | 半径 | number | 是 | iOS:✅ Android:✅ | |
| strokeWidth | 描边的宽度 | number | 否 | iOS:✅ Android:✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | iOS:✅ Android:✅ |
# control
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 控件id | number | 否 | 在控件点击事件回调会返回此id | iOS:❌ Android:❌ |
| position | 控件在地图的位置 | object | 是 | 控件相对地图位置 | iOS:❌ Android:❌ |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持本地路径、代码包路径 | iOS:❌ Android:❌ |
| clickable | 是否可点击 | boolean | 否 | 默认不可点击 | iOS:❌ Android:❌ |
# position
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| left | 距离地图的左边界多远 | number | 否 | 默认为0 | iOS:❌ Android:❌ |
| top | 距离地图的上边界多远 | number | 否 | 默认为0 | iOS:❌ Android:❌ |
| width | 控件宽度 | number | 否 | 默认为0 | iOS:❌ Android:❌ |
| height | 控件高度 | number | 否 | 默认为0 | iOS:❌ Android:❌ |
# 谷歌地图(仅Android支持)
| 属性 | 类型 | 默认值 | 必填 | 说明 | 支持度 |
|---|---|---|---|---|---|
| longitude | number | 116.46 | 是 | 中心经度 | ✅ |
| latitude | number | 39.92 | 是 | 中心纬度 | ✅ |
| scale | number | 16 | 否 | 缩放级别，取值范围为3-20 | ✅ |
| min-scale | number | 3 | 否 | 最小缩放级别 | ✅ |
| max-scale | number | 20 | 否 | 最大缩放级别 | ✅ |
| markers | Array.marker | 否 | 标记点 | ✅ | |
| polyline | Array.polyline | 否 | 路线 | ✅ | |
| circles | Array.circle | 否 | 圆 | ✅ | |
| controls | Array.control | 否 | 控件（即将废弃，建议使用 cover-view 代替） | ❌ | |
| include-points | Array.point | 否 | 缩放视野以包含所有给定的坐标点 | ✅ | |
| show-location | boolean | false | 否 | 显示带有方向的当前定位点 | ✅ |
| polygons | Array.polygon | 否 | 多边形 | ✅ | |
| subkey | - | 否 | 个性化地图暂不支持 | ❌ | |
| layer-style | - | 否 | 个性化地图暂不支持 | ❌ | |
| rotate | number | 0 | 否 | 旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 | ✅ |
| skew | number | 0 | 否 | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 | ✅ |
| enable-3D | boolean | false | 否 | 展示3D楼块 | ❌ |
| show-compass | boolean | false | 否 | 显示指南针 | ✅ |
| show-scale | boolean | false | 否 | 显示比例尺 | ❌ |
| enable-overlooking | boolean | false | 否 | 开启俯视 | ✅ |
| enable-zoom | boolean | true | 否 | 是否支持缩放 | ✅ |
| enable-scroll | boolean | true | 否 | 是否支持拖动 | ✅ |
| enable-rotate | boolean | false | 否 | 是否支持旋转 | ✅ |
| enable-satellite | boolean | false | 否 | 是否开启卫星图 | ✅ |
| enable-traffic | boolean | false | 否 | 是否开启实时路况 | ✅ |
| enable-poi | boolean | true | 否 | 是否展示 POI 点 | ✅ |
| enable-building | boolean | 否 | 是否展示建筑物 | ✅ | |
| setting | object | 否 | 配置项 setting内容与属性配置冲突时，以setting的为准 | ✅ | |
| bindtap | eventhandle | 否 | 点击地图时触发，返回经纬度信息 | ✅ | |
| bindmarkertap | eventhandle | 否 | 点击标记点时触发，e.detail = {markerId} | ✅ | |
| bindlabeltap | eventhandle | 否 | 点击label时触发，e.detail = {markerId} | ❌ | |
| bindcontroltap | eventhandle | 否 | 点击控件时触发，e.detail = {controlId} | ❌ | |
| bindcallouttap | eventhandle | 否 | 点击标记点对应的气泡时触发e.detail = {markerId} | ✅ | |
| bindupdated | eventhandle | 否 | 在地图渲染更新完成时触发 | ✅ 仅在地图加载完成时触发 | |
| bindregionchange | eventhandle | 否 | 视野发生变化时触发 | ✅ | |
| bindpoitap | eventhandle | 否 | 点击地图poi点时触发，e.detail = {name, longitude, latitude} | ✅ | |
| bindanchorpointtap | eventhandle | 否 | 点击定位标时触发，e.detail = {longitude, latitude} | ✅ |
# marker
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 标记点 id | number | 否 | marker 点击事件回调会返回此 id。 | ✅ |
| clusterId | 聚合簇的 id | number | 否 | 自定义点聚合簇效果时使用 | ✅ |
| joinCluster | 是否参与点聚合 | Boolean | 否 | 默认不参与点聚合 | ✅ |
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | ✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | ✅ |
| title | 标注点名 | string | 否 | 点击时显示，callout存在时将被忽略 | ✅ |
| zIndex | 显示层级 | number | 否 | ✅ | |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持网络路径、本地路径、代码包路径 | ✅ |
| rotate | 旋转角度 | number | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 | ✅ |
| alpha | 标注的透明度 | number | 否 | 默认 1，无透明，范围 0 ~ 1 | ✅ |
| width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 | ✅ |
| height | 标记点 | number | 否 | 默认为图片实际高度 | ✅ |
| callout | 标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 | ✅ |
| customCallout | 标记点 | object | 否 | ✅ | |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表，可识别换行符。 | ❌ |
| anchor | 经纬度在标注图标的锚点，默认底边中点 | Object | 否 | {x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | ✅ |
| aria-label | 无障碍访问，（属性）元素的额外描述 | string | 否 | ❌ |
# marker 上的气泡 callout
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | ✅ | |
| color | 文本颜色 | string | ✅ | |
| fontSize | 文字大小 | number | ✅ | |
| borderRadius | 边框圆角 | number | ✅ | |
| borderWidth | 边框宽度 | string | ✅ | |
| borderColor | 边框颜色 | string | ✅ | |
| bgColor | 背景色 | string | ✅ | |
| padding | 文本边缘留白 | number | ✅ | |
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | ❌ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | ✅ | |
| anchorX | 横向偏移量，向右为正数 | number | ✅ | |
| anchorY | 纵向偏移量，向下为正数 | number | ✅ |
# marker 上的气泡 customCallout
customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | ❌ | |
| anchorX | 横向偏移量，向右为正数 | number | ✅ | |
| anchorY | 纵向偏移量，向下为正数 | number | ✅ |
使用方式如下，map 组件下添加名为 callout 的 slot 节点，其内部的 cover-view 通过 marker-id 属性与 marker 绑定。当 marker 创建时，该 cover-view 显示的内容将作为 callout 显示在标记点上方。
<map>
<cover-view slot="callout">
<cover-view marker-id="1"></cover-view>
<cover-view marker-id="2"></cover-view>
<cover-view marker-id="3"></cover-view>
</cover-view>
</map>
# marker 上的气泡 label
| 属性 | 说明 | 类型 | 备注 | 支持度 |
|---|---|---|---|---|
| content | 文本 | string | ❌ | |
| color | 文本颜色 | string | ❌ | |
| fontSize | 文字大小 | number | ❌ | |
| anchorX | label的坐标，原点是 marker 对应的经纬度 | number | ❌ | |
| anchorY | label的坐标，原点是 marker 对应的经纬度 | number | ❌ | |
| borderWidth | 边框宽度 | number | ❌ | |
| borderColor | 边框颜色 | string | ❌ | |
| borderRadius | 边框圆角 | number | ❌ | |
| bgColor | 背景色 | string | ❌ | |
| padding | 文本边缘留白 | number | ❌ | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | ❌ |
# polyline
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | ✅ |
| color | 线的颜色 | string | 否 | 十六进制 | ✅ |
| colorList | 彩虹线 | array | 否 | 存在时忽略 color 值 | ❌ |
| width | 线的宽度 | number | 否 | ✅ | |
| dottedLine | 是否虚线 | boolean | 否 | 默认 false | ❌ |
| arrowLine | 带箭头的线 | boolean | 否 | 默认 false | ❌ |
| arrowIconPath | 更换箭头图标 | string | 否 | 在 arrowLine 为 true 时生效 | ❌ |
| borderColor | 线的边框颜色 | string | 否 | ❌ | |
| borderWidth | 线的厚度 | number | 否 | ❌ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | ❌ |
# polygon
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | ✅ |
| strokeWidth | 描边的宽度 | number | 否 | ✅ | |
| strokeColor | 描边的颜色 | string | 否 | 十六进制 | ✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | ✅ |
| zIndex | 设置多边形Z轴数值 | number | 否 | ✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | ❌ |
# circle
| 属性 | 说明 | 类型 | 必填 | 备注 | 其他 |
|---|---|---|---|---|---|
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 | ✅ |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 | ✅ |
| color | 描边的颜色 | string | 否 | 十六进制 | ✅ |
| fillColor | 填充颜色 | string | 否 | 十六进制 | ✅ |
| radius | 半径 | number | 是 | ✅ | |
| strokeWidth | 描边的宽度 | number | 否 | ✅ | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels | ❌ |
# control
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| id | 控件id | number | 否 | 在控件点击事件回调会返回此id | ❌ |
| position | 控件在地图的位置 | object | 是 | 控件相对地图位置 | ❌ |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持本地路径、代码包路径 | ❌ |
| clickable | 是否可点击 | boolean | 否 | 默认不可点击 | ❌ |
# position
| 属性 | 说明 | 类型 | 必填 | 备注 | 支持度 |
|---|---|---|---|---|---|
| left | 距离地图的左边界多远 | number | 否 | 默认为0 | ❌ |
| top | 距离地图的上边界多远 | number | 否 | 默认为0 | ❌ |
| width | 控件宽度 | number | 否 | 默认为0 | ❌ |
| height | 控件高度 | number | 否 | 默认为0 | ❌ |