地图组件
系统地图(仅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 显示在标记点上方。
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默认开启,不支持关闭) | 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 显示在标记点上方。
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 显示在标记点上方。
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 显示在标记点上方。
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 显示在标记点上方。
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 | ❌ |