Skip to main content
Version: 下个版本

Map

地图。相关api Taro.createMapContext。

参考文档

类型

ComponentType<MapProps>

示例代码

普通用法

class App extends Component {
onTap () {}
render () {
return (
<Map onClick={this.onTap} />
)
}
}

自定义气泡

marker 上的自定义气泡 customCallout
import { CoverView, Map, View } from '@tarojs/components'

const normalCallout = {
id: 1,
latitude: 23.098994,
longitude: 113.32252,
callout: {
content: '文本内容',
color: '#ff0000',
fontSize: 14,
borderWidth: 2,
borderRadius: 10,
borderColor: '#000000',
bgColor: '#fff',
padding: 5,
display: 'ALWAYS',
textAlign: 'center',
}
}

const customCallout1 = {
id: 2,
latitude: 23.097994,
longitude: 113.32352,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS',
},
}

const customCallout2 = {
id: 3,
latitude: 23.096994,
longitude: 113.32452,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS',
},
}

const customCallout3 = {
id: 4,
latitude: 23.095994,
longitude: 113.32552,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS',
},
}

const customMarkers = [
customCallout1,
customCallout2,
customCallout3,
]

const mapMarkers = [
normalCallout,
...customMarkers
]

export default function Index() {
return (
<Map
setting={{}}
markers={mapMarkers}
latitude={23.096994}
longitude={113.324520}
style={{ height: '100vh', width: '100vw' }}
>
<CoverView slot='callout'>
{
customMarkers.map(item => (
/** 自定义样式的 callout */
<CoverView marker-id={item.id} key={item.id} >
<View>导航{item.id}</View>
</CoverView>
))
}
</CoverView>
</Map>
)
}

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✔️✔️✔️