地图。相关api Taro.createMapContext。

参考文档

类型

  1. ComponentType<MapProps>

示例代码

  1. class App extends Component {
  2. onTap () {}
  3. render () {
  4. return (
  5. <Map onClick={this.onTap} />
  6. )
  7. }
  8. }

MapProps

参数类型默认值必填说明
longitudenumber中心经度
latitudenumber中心纬度
scalenumber16缩放级别,取值范围为3-20
markersmarker[]标记点
coversany[]标记点
不推荐: 即将移除,请使用 markers
polylinepolyline[]路线
circlescircle[]
controlscontrol[]控件(即将废弃,建议使用 cover-view 代替)
不推荐使用
includePointspoint[]缩放视野以包含所有给定的坐标点
showLocationbooleanfalse显示带有方向的当前定位点
polygonspolygon[]多边形
subkeystring个性化地图使用的 key
layerStylenumber1个性化地图配置的 style,不支持动态修改
rotatenumber0旋转角度,范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角
skewnumber0倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角
enable3Dbooleanfalse展示 3D 楼块
showCompassbooleanfalse显示指南针
showScalebooleanfalse显示比例尺
enableOverlookingbooleanfalse开启俯视
enableZoombooleantrue是否支持缩放
enableScrollbooleantrue是否支持拖动
enableRotatebooleanfalse是否支持旋转
enableSatellitebooleanfalse是否开启卫星图
enableTrafficbooleanfalse是否开启实时路况
settingMapProps | Object配置项

提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate 和 skew,通过 setData 分开设置时无法同时生效,需通过 settting 统一修改。
onTapBaseEventOrigFunction<any>点击地图时触发
onMarkerTapBaseEventOrigFunction<onMarkerTapEventDetail>点击标记点时触发,e.detail = {{markerId}}
onLabelTapBaseEventOrigFunction<onLabelTapEventDetail>点击label时触发,e.detail = {{markerId}}
onControlTapBaseEventOrigFunction<onControlTapEventDetail>点击控件时触发,e.detail = {{controlId}}
onCalloutTapBaseEventOrigFunction<onCalloutTapEventDetail>点击标记点对应的气泡时触发,e.detail = {{markerId}}
onUpdatedBaseEventOrigFunction<any>在地图渲染更新完成时触发
onRegionChangeBaseEventOrigFunction<onRegionChangeEventDetail>视野发生变化时触发
onPoiTapBaseEventOrigFunction<onPoiTapEventDetail>点击地图poi点时触发,e.detail = {{name, longitude, latitude}}
includePadding{{ left: string | number; right: string | number; top: string | number; bottom: string | number; }}视野在地图 padding 范围内展示
groundOverlaysany[]覆盖物,自定义贴图
tileOverlayany[]覆盖物,网格贴图
optimizeboolean开启 optimize 模式后,无需再监听 onRegionChange 来获取并设置新的 scale 值以保证地图不会再回到原来的缩放比例。

API 支持度

API微信小程序百度小程序支付宝小程序H5React Native
MapProps.longitude✔️✔️✔️
MapProps.latitude✔️✔️✔️
MapProps.scale✔️✔️(取值范围为4-21)✔️(取值范围为5-18)
MapProps.markers✔️✔️✔️
MapProps.covers✔️
MapProps.polyline✔️✔️✔️
MapProps.circles✔️✔️✔️
MapProps.controls✔️✔️✔️
MapProps.includePoints✔️✔️✔️
MapProps.showLocation✔️✔️✔️
MapProps.polygons✔️✔️✔️
MapProps.subkey✔️
MapProps.layerStyle✔️
MapProps.rotate✔️
MapProps.skew✔️
MapProps.enable3D✔️✔️
MapProps.showCompass✔️✔️
MapProps.showScale✔️
MapProps.enableOverlooking✔️✔️
MapProps.enableZoom✔️✔️
MapProps.enableScroll✔️✔️
MapProps.enableRotate✔️✔️
MapProps.enableSatellite✔️
MapProps.enableTraffic✔️
MapProps.setting✔️✔️
MapProps.onTap✔️✔️✔️
MapProps.onMarkerTap✔️✔️✔️
MapProps.onLabelTap✔️
MapProps.onControlTap✔️✔️✔️
MapProps.onCalloutTap✔️✔️✔️
MapProps.onUpdated✔️✔️
MapProps.onRegionChange✔️✔️✔️
MapProps.onPoiTap✔️✔️
MapProps.includePadding✔️
MapProps.groundOverlays✔️
MapProps.tileOverlay✔️
MapProps.optimize✔️

marker

标记点用于在地图上显示标记的位置

参数类型必填说明备注
idnumber标记点idmarker 点击事件回调会返回此id。建议为每个 marker 设置上 Number 类型 id,保证更新 marker 时有更好的性能。
latitudenumber纬度浮点数,范围 -90 ~ 90
longitudenumber经度浮点数,范围 -180 ~ 180
titlestring标注点名点击时显示,callout 存在时将被忽略
zIndexnumber显示层级
iconPathstring显示的图标项目目录下的图片路径,支持相对路径写法,以’/‘开头则表示相对小程序根目录;也支持临时路径和网络图片
rotatenumber旋转角度顺时针旋转的角度,范围 0 ~ 360,默认为 0
alphanumber标注的透明度默认1,无透明,范围 0 ~ 1
widthstring | number标注图标宽度默认为图片实际宽度
heightstring | number标注图标高度默认为图片实际高度
calloutcallout自定义标记点上方的气泡窗口支持的属性见下表,可识别换行符。
labellabel为标记点旁边增加标签支持的属性见下表,可识别换行符。
anchor{{ x: number; y: number; }}经纬度在标注图标的锚点,默认底边中点{{x, y}},x表示横向(0-1),y表示竖向(0-1)。{{x: .5, y: 1}} 表示底边中点
ariaLabelstring无障碍访问,(属性)元素的额外描述

callout

marker 上的气泡 callout

参数类型说明
contentstring文本
colorstring文本颜色
fontSizenumber文字大小
borderRadiusnumber边框圆角
borderWidthnumber边框宽度
borderColorstring边框颜色
bgColorstring背景色
paddingnumber文本边缘留白
display“BYCLICK” | “ALWAYS”‘BYCLICK’:点击显示; ‘ALWAYS’:常显
textAlign“left” | “right” | “center”文本对齐方式。有效值: left, right, center

label

marker 上的气泡 label

参数类型说明
contentstring文本
colorstring文本颜色
fontSizenumber文字大小
xnumberlabel的坐标(废弃)
不推荐使用
ynumberlabel的坐标(废弃)
不推荐使用
anchorXnumberlabel的坐标,原点是 marker 对应的经纬度
anchorYnumberlabel的坐标,原点是 marker 对应的经纬度
borderWidthnumber边框宽度
borderColorstring边框颜色
borderRadiusnumber边框圆角
bgColorstring背景色
paddingnumber文本边缘留白
textAlign“left” | “right” | “center”文本对齐方式。有效值: left, right, center

polyline

指定一系列坐标点,从数组第一项连线至最后一项

参数类型必填说明备注
pointspoint[]经纬度数组[{{latitude: 0, longitude: 0}}]
colorstring线的颜色十六进制
widthnumber线的宽度
dottedLineboolean是否虚线默认 false
arrowLineboolean带箭头的线默认 false,开发者工具暂不支持该属性
arrowIconPathstring更换箭头图标在 arrowLine 为 true 时生效
borderColorstring线的边框颜色
borderWidthnumber线的厚度

polygon

指定一系列坐标点,根据 points 坐标数据生成闭合多边形

参数类型必填说明备注
pointspoint[]经纬度数组[{{latitude: 0, longitude: 0}}]
strokeWidthnumber描边的宽度
strokeColorstring描边的颜色十六进制
fillColorstring填充颜色十六进制
zIndexnumber设置多边形Z轴数值

circle

在地图上显示圆

参数类型必填说明备注
latitudenumber纬度浮点数,范围 -90 ~ 90
longitudenumber经度浮点数,范围 -180 ~ 180
colorstring描边的颜色十六进制
fillColorstring填充颜色十六进制
radiusnumber半径
strokeWidthnumber描边的宽度

control

在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view

参数类型必填说明备注
idnumber控件id在控件点击事件回调会返回此id
positionpoint控件在地图的位置控件相对地图位置
iconPathstring显示的图标项目目录下的图片路径,支持本地路径、代码包路径
clickableboolean是否可点击默认不可点击

point

参数类型说明
longitudenumber经度
latitudenumber纬度

position

参数类型默认值说明
leftnumber0距离地图的左边界多远
topnumber0距离地图的上边界多远
widthnumber图片宽度控件宽度
heightnumber图片宽度控件高度

onMarkerTapEventDetail

参数类型
markerIdstring | number

onLabelTapEventDetail

参数类型
markerIdstring | number

onControlTapEventDetail

参数类型
controlIdstring | number

onCalloutTapEventDetail

参数类型
markerIdstring | number

onRegionChangeEventDetail

参数类型说明备注
typestring视野变化开始、结束时触发视野变化开始为begin,结束为end
causedBystring导致视野变化的原因拖动地图导致(drag)、缩放导致(scale)、调用接口导致(update)
detailregionChangeDetail视野改变详情

regionChangeDetail

参数类型说明
rotatenumber旋转角度
skewnumber倾斜角度

onPoiTapEventDetail

参数类型
namestring
longitudenumber
latitudenumber

API 支持度

API微信小程序百度小程序支付宝小程序H5React Native
Map✔️✔️✔️