# 地图组件

iOS使用地图组件需要集成扩展SDK/MapSDK(系统地图使用扩展SDK,第三方地图使用MapSDK)

iOS集成扩展SDK/MapSDK请参考「小程序 SDK-iOS SDK-iOS 集成」

Android使用地图组件需要集成MapSDK

Android集成MapSDK请参考「小程序 SDK-Android SDK-Android 集成-6. MapSDK」

# 系统地图(仅iOS支持)

属性 类型 默认值 必填 说明 支持度
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 ❌




# 高德地图

高德地图最多允许有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:❌ 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:❌ 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 ❌