Skip to main content
Version: 3.x

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✔️✔️✔️
Edit this page