# 地图组件

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