Skip to main content
Version: Next

Map

Map. Related API: Taro.createMapContext.

Reference

Type

ComponentType<MapProps>

Examples

General usage

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

Customised bubbles

Custom bubbles on marker customCallout
import { CoverView, Map, View } from '@tarojs/components'

const normalCallout = {
id: 1,
latitude: 23.098994,
longitude: 113.32252,
callout: {
content: 'text 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 => (
<CoverView marker-id={item.id} key={item.id} >
<View>navigator {item.id}</View>
</CoverView>
))
}
</CoverView>
</Map>
)
}

MapProps

PropertyTypeDefaultRequiredDescription
longitudenumberYesThe longitude of the central point.
latitudenumberYesThe latitude of the central point.
scalenumber16NoThe zoom level. Its values range from 3 to 20.
markersmarker[]NoThe marker.
coversany[]NoThis property will be discarded soon. Use the markers property instead.
polylinepolyline[]NoThe polyline.
circlescircle[]NoThe circle.
controlscontrol[]NoThe control. (This property will be discarded soon. Use cover-view instead.)
includePointspoint[]NoScales the view to include all the given coordinates.
showLocationbooleanfalseNoDisplays the current location with directions.
polygonspolygon[]NoPolygon.
subkeystringNoThe key used in a custom map.
layerStylenumber1NoThe style set for a custom map. It cannot be dynamically modified.
rotatenumber0NoRotation angle. Its values range from 0 to 360. It is the angle between the north direction of the map and the y-axis of the device.
skewnumber0NoSkew angle relative to the z-axis. Its values range from 0 to 40.
enable3DbooleanfalseNoDisplays 3D blocks (Currently unsupported in the DevTools).
showCompassbooleanfalseNoDisplays the compass.
showScalebooleanfalseNoDispaly the scale
enableOverlookingbooleanfalseNoEnables overlooking.
enableZoombooleantrueNoSpecifies whether to support scaling.
enableScrollbooleantrueNoSpecifies whether to support scrolling.
enableRotatebooleanfalseNoSpecifies whether to support rotation.
enableSatellitebooleanfalseNoSpecifies whether to enable the satellite images.
enableTrafficbooleanfalseNoSpecifies whether to enable real-time traffic information.
settingMapProps | ObjectNoSetting.

The map configuration is set uniformly. Some animation properties such as rotate and skew cannot be set separately by setData and must be modified by settting.
onTapBaseEventOrigFunction<any>NoTriggered when the map is tapped.
onMarkerTapBaseEventOrigFunction<onMarkerTapEventDetail>NoTriggered when the marker is tapped. e.detail = {markerId}
onLabelTapBaseEventOrigFunction<onLabelTapEventDetail>Triggered when the label is tapped. e.detail = {markerId}
onControlTapBaseEventOrigFunction<onControlTapEventDetail>NoTriggered when the control is tapped. e.detail = {controlId}
onCalloutTapBaseEventOrigFunction<onCalloutTapEventDetail>NoTriggered when the bubble corresponding to the marker is tapped. e.detail = {markerId}
onUpdatedBaseEventOrigFunction<any>NoTriggered when the map is rendered.
onRegionChangeBaseEventOrigFunction<onRegionChangeEventDetail>NoTriggered when the view changes.
onPoiTapBaseEventOrigFunction<onPoiTapEventDetail>Triggered when the point of interests (POI) on the map is tapped. e.detail = {name, longitude, latitude}
includePadding{ left: string | number; right: string | number; top: string | number; bottom: string | number; }NoThe view is displayed within the map padding.
groundOverlaysany[]NoOverlays, custom poster
tileOverlayany[]NoOverlays, mesh poster
optimizebooleanSpecifies whether to enable optimize mode. When enabled, it is not necessary to set onRegionChange to get and set the new scale value to ensure that the map does not revert to the original scale.

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramH5React 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

The marker property is used to mark locations of markers on the map.

PropertyTypeRequiredDescriptionRemarks
idnumberNoThe ID of the markerThis ID is returned when the marker tapping event is called back. We recommend that the number-type ID be set for each marker, to ensure that the marker has better performance during updates.
latitudenumberYesLatitudeThe number of floating points. Its values range from –90 to +90.
longitudenumberYesLongitudeThe number of floating points. Its values range from –180 to +180.
titlestringNoName of the markerDisplayed when it is tapped. It will be ignored when there is a callout.
zIndexnumberNoDisplay level
iconPathstringYesDisplayed iconThe image path in the project directory. It can be written as a relative path prefixed with a forward slash '/', which indicates a relative root directory of a Mini Program. It can also be written as a temporary path and a network image.
rotatenumberNoRotation angleThe angle of clockwise rotation. Its values range from 0 to 360. It is 0 by default.
alphanumberNoTransparency of the markerIt is 1 by default, indicating that the marker is completely not transparent. Its values range from 0 to 1.
widthstring | numberNoThe width of the marker iconDefaults to the actual width of the image.
heightstring | numberNoThe height of the marker iconDefaults to the actual height of the image.
calloutcalloutNoBubble window above a custom markerSupported properties are shown in the following table. It can recognize line breaks.
labellabelNoLabels added next to the markerSupported properties are shown in the following table. It can recognize line breaks.
anchor{ x: number; y: number; }NoAnchor whose longitude and latitude fall in a marker icon. It is the central point of the bottom edge by default.Its value is in the form of{x, y}, where x indicates (0–1) in the horizontal direction, and y indicates (0–1) in the vertical direction. The value {x: 0.5, y: 1} indicates the central point of the bottom edge.
ariaLabelstringNoARIA. Additional description of the (property's) elements.

callout

Callout of a Bubble on the Marker

PropertyTypeDescription
contentstringThe text
colorstringThe color of the text
fontSizenumberThe font size of the text
borderRadiusnumberThe radius of the rounded corner on the border
borderWidthnumberThe width of the border
borderColorstringThe color of the border
bgColorstringThe background color
paddingnumberThe space between the text and the border
display"BYCLICK" | "ALWAYS"'BYCLICK' : Click to display. 'ALWAYS': Always on.
textAlign"left" | "right" | "center"The text alignment mode. Valid values include left, right, and center.

label

Label of a Bubble on the Marker

PropertyTypeDescription
contentstringThe text
colorstringThe color of the text
fontSizenumberThe font size of the text
xnumberThe X-coordinate of the label (This property has been discarded.)
不推荐使用
ynumberThe Y-coordinate of the label (This property has been discarded.)
不推荐使用
anchorXnumberThe X-coordinate of the label, with the coordinates of the origin being the longitude and latitude corresponding to the marker.
anchorYnumberThe Y-coordinate of the label, with the coordinates of the origin being the longitude and latitude corresponding to the marker.
borderWidthnumberThe width of the border
borderColorstringThe color of the border
borderRadiusnumberThe radius of the rounded corner on the border
bgColorstringThe background color
paddingnumberThe space between the text and the border
textAlign"left" | "right" | "center"The text alignment mode. Valid values include left, right, and center.

polyline

Specifies a series of coordinates, which are connected from the first item to the last item in an array.

PropertyTypeRequiredDescriptionRemarks
pointspoint[]YesThe longitude and latitude array[{latitude: 0, longitude: 0}]
colorstringNoThe color of the lineHexadecimal
widthnumberNoThe width of the line
dottedLinebooleanNoSpecifies whether the line is a dotted line.Its value is false by default.
arrowLinebooleanNoSpecifies whether the line contains an arrow.Its value is false by default. WeChat DevTools currently does not support this property.
arrowIconPathstringNoChanges the arrow icon.It takes effect when arrowLine is true.
borderColorstringNoThe color of the line's border
borderWidthnumberNoThe thickness of the line

polygon

Specifies a series of coordinates, which form a closed polygon based on the coordinate data in the points property.

PropertyTypeRequiredDescriptionRemarks
pointspoint[]YesThe longitude and latitude array[{latitude: 0, longitude: 0}]
strokeWidthnumberNoThe width of the stroke
strokeColorstringNoThe color of the strokeHexadecimal
fillColorstringNoThe fill colorHexadecimal
zIndexnumberNoSets the value of the z-axis of the polygon.

circle

This property specifies whether to show a circle on the map.

PropertyTypeRequiredDescriptionRemarks
latitudenumberYesLatitudeThe number of floating points. Its values range from –90 to +90.
longitudenumberYesLongitudeThe number of floating points. Its values range from –180 to +180.
colorstringNoThe color of the strokeHexadecimal
fillColorstringNoThe fill colorHexadecimal
radiusnumberYesRadius
strokeWidthnumberNoThe width of the stroke

control

This property specifies whether to show controls on the map. The controls do not move with the map. This property will be discarded soon. Use CoverView instead.

PropertyTypeRequiredDescriptionRemarks
idnumberNoThe ID of the controlThis ID is returned when the control tapping event is called back.
positionpointYesThe location of the control on the mapThe location of the control relative to the map.
iconPathstringYesDisplayed iconThe image path in the project directory. It can be written as a relative path prefixed with a forward slash '/', which indicates a relative root directory of a Mini Program. It can also be written as a temporary path.
clickablebooleanNoSpecifies whether the control is clickable.It is unclickable by default.

point

PropertyTypeDescription
longitudenumberLongitude
latitudenumberLatitude

position

PropertyTypeDefaultDescription
leftnumber0The distance from the left edge of the map.
topnumber0The distance from the top edge of the map.
widthnumberImage widthThe width of the control
heightnumberImage heightThe height of the control

onMarkerTapEventDetail

ParamType
markerIdstring | number

onLabelTapEventDetail

ParamType
markerIdstring | number

onControlTapEventDetail

ParamType
controlIdstring | number

onCalloutTapEventDetail

ParamType
markerIdstring | number

onRegionChangeEventDetail

ParamTypeDescriptionRemarks
typestringTriggered at the start and end of a field of view change.begin and end
causedBystringCauses of changes in visual fielddrag, scale, update
detailregionChangeDetailDetails of the change of region

regionChangeDetail

ParamTypeDescription
rotatenumberRotation angle
skewnumberSkew angle

onPoiTapEventDetail

ParamType
namestring
longitudenumber
latitudenumber

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramH5React Native
Map✔️✔️✔️