title: Map
sidebar_label: Map
Map. Related API: Taro.createMapContext.
Type
ComponentType<MapProps>
Examples
General usage
import Tabs from ‘@theme/Tabs’ import TabItem from ‘@theme/TabItem’
tsx
class App extends Component {
onTap () {}
render () {
return (
<Map onClick={this.onTap} />
)
}
}
html
<template>
<map
id="map"
style="width: 100%; height: 300px;"
longitude="113.324520"
latitude="23.099994"
scale="14"
:markers="markers"
:polyline="polyline"
:show-location="true"
@regionchange="regionchange"
@markertap="markertap"
/>
</template>
<script>
export default {
data() {
return {
markers: [{
iconPath: "https://avatars2.githubusercontent.com/u/1782542?s=460&u=d20514a52100ed1f82282bcfca6f49052793c889&v=4",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
}],
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color:"#FF0000DD",
width: 2,
dottedLine: true
}]
}
},
methods: {
regionchange(e) {
console.log(e.type)
},
markertap(e) {
console.log("markertap:", e.detail.markerId)
}
}
}
</script>
Customised bubbles
```js title=”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 ( ) } ```
MapProps
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| longitude | number |
Yes | The longitude of the central point. | |
| latitude | number |
Yes | The latitude of the central point. | |
| scale | number |
16 |
No | The zoom level. Its values range from 3 to 20. |
| markers | marker[] |
No | The marker. | |
| covers | any[] |
No | This property will be discarded soon. Use the markers property instead. | |
| polyline | polyline[] |
No | The polyline. | |
| circles | circle[] |
No | The circle. | |
| controls | control[] |
No | The control. (This property will be discarded soon. Use cover-view instead.) | |
| includePoints | point[] |
No | Scales the view to include all the given coordinates. | |
| showLocation | boolean |
false |
No | Displays the current location with directions. |
| polygons | polygon[] |
No | Polygon. | |
| subkey | string |
No | The key used in a custom map. | |
| layerStyle | number |
1 |
No | The style set for a custom map. It cannot be dynamically modified. |
| rotate | number |
0 |
No | Rotation 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. |
| skew | number |
0 |
No | Skew angle relative to the z-axis. Its values range from 0 to 40. |
| enable3D | boolean |
false |
No | Displays 3D blocks (Currently unsupported in the DevTools). |
| showCompass | boolean |
false |
No | Displays the compass. |
| showScale | boolean |
false |
No | Dispaly the scale |
| enableOverlooking | boolean |
false |
No | Enables overlooking. |
| enableZoom | boolean |
true |
No | Specifies whether to support scaling. |
| enableScroll | boolean |
true |
No | Specifies whether to support scrolling. |
| enableRotate | boolean |
false |
No | Specifies whether to support rotation. |
| enableSatellite | boolean |
false |
No | Specifies whether to enable the satellite images. |
| enableTraffic | boolean |
false |
No | Specifies whether to enable real-time traffic information. |
| setting | MapProps | Object |
No | Setting. 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. |
|
| onTap | BaseEventOrigFunction<any> |
No | Triggered when the map is tapped. | |
| onMarkerTap | BaseEventOrigFunction<onMarkerTapEventDetail> |
No | Triggered when the marker is tapped. e.detail = {{markerId}} |
|
| onLabelTap | BaseEventOrigFunction<onLabelTapEventDetail> |
否 | Triggered when the label is tapped. e.detail = {{markerId}} |
|
| onControlTap | BaseEventOrigFunction<onControlTapEventDetail> |
No | Triggered when the control is tapped. e.detail = {{controlId}} |
|
| onCalloutTap | BaseEventOrigFunction<onCalloutTapEventDetail> |
No | Triggered when the bubble corresponding to the marker is tapped. e.detail = {{markerId}} |
|
| onUpdated | BaseEventOrigFunction<any> |
No | Triggered when the map is rendered. | |
| onRegionChange | BaseEventOrigFunction<onRegionChangeEventDetail> |
No | Triggered when the view changes. | |
| onPoiTap | BaseEventOrigFunction<onPoiTapEventDetail> |
否 | Triggered when the point of interests (POI) on the map is tapped. e.detail = {{name, longitude, latitude}} |
|
| includePadding | { |
No | The view is displayed within the map padding. | |
| groundOverlays | any[] |
No | Overlays, custom poster | |
| tileOverlay | any[] |
No | Overlays, mesh poster | |
| optimize | boolean |
否 | Specifies 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
| Property | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | H5 | React 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.
| Property | Type | Required | Description | Remarks |
|---|---|---|---|---|
| id | number |
No | The ID of the marker | This 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. |
| latitude | number |
Yes | Latitude | The number of floating points. Its values range from –90 to +90. |
| longitude | number |
Yes | Longitude | The number of floating points. Its values range from –180 to +180. |
| title | string |
No | Name of the marker | Displayed when it is tapped. It will be ignored when there is a callout. |
| zIndex | number |
No | Display level | |
| iconPath | string |
Yes | Displayed icon | The 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. |
| rotate | number |
No | Rotation angle | The angle of clockwise rotation. Its values range from 0 to 360. It is 0 by default. |
| alpha | number |
No | Transparency of the marker | It is 1 by default, indicating that the marker is completely not transparent. Its values range from 0 to 1. |
| width | string | number |
No | The width of the marker icon | Defaults to the actual width of the image. |
| height | string | number |
No | The height of the marker icon | Defaults to the actual height of the image. |
| callout | callout |
No | Bubble window above a custom marker | Supported properties are shown in the following table. It can recognize line breaks. |
| label | label |
No | Labels added next to the marker | Supported properties are shown in the following table. It can recognize line breaks. |
| anchor | { |
No | Anchor 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{, 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. |
| ariaLabel | string |
No | ARIA. Additional description of the (property’s) elements. |
callout
Callout of a Bubble on the Marker
| Property | Type | Description |
|---|---|---|
| content | string |
The text |
| color | string |
The color of the text |
| fontSize | number |
The font size of the text |
| borderRadius | number |
The radius of the rounded corner on the border |
| borderWidth | number |
The width of the border |
| borderColor | string |
The color of the border |
| bgColor | string |
The background color |
| padding | number |
The 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
| Property | Type | Description |
|---|---|---|
| content | string |
The text |
| color | string |
The color of the text |
| fontSize | number |
The font size of the text |
| x | number |
The X-coordinate of the label (This property has been discarded.) 不推荐使用 |
| y | number |
The Y-coordinate of the label (This property has been discarded.) 不推荐使用 |
| anchorX | number |
The X-coordinate of the label, with the coordinates of the origin being the longitude and latitude corresponding to the marker. |
| anchorY | number |
The Y-coordinate of the label, with the coordinates of the origin being the longitude and latitude corresponding to the marker. |
| borderWidth | number |
The width of the border |
| borderColor | string |
The color of the border |
| borderRadius | number |
The radius of the rounded corner on the border |
| bgColor | string |
The background color |
| padding | number |
The 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.
| Property | Type | Required | Description | Remarks |
|---|---|---|---|---|
| points | point[] |
Yes | The longitude and latitude array | [{ |
| color | string |
No | The color of the line | Hexadecimal |
| width | number |
No | The width of the line | |
| dottedLine | boolean |
No | Specifies whether the line is a dotted line. | Its value is false by default. |
| arrowLine | boolean |
No | Specifies whether the line contains an arrow. | Its value is false by default. WeChat DevTools currently does not support this property. |
| arrowIconPath | string |
No | Changes the arrow icon. | It takes effect when arrowLine is true. |
| borderColor | string |
No | The color of the line’s border | |
| borderWidth | number |
No | The thickness of the line |
polygon
Specifies a series of coordinates, which form a closed polygon based on the coordinate data in the points property.
| Property | Type | Required | Description | Remarks |
|---|---|---|---|---|
| points | point[] |
Yes | The longitude and latitude array | [{ |
| strokeWidth | number |
No | The width of the stroke | |
| strokeColor | string |
No | The color of the stroke | Hexadecimal |
| fillColor | string |
No | The fill color | Hexadecimal |
| zIndex | number |
No | Sets the value of the z-axis of the polygon. |
circle
This property specifies whether to show a circle on the map.
| Property | Type | Required | Description | Remarks |
|---|---|---|---|---|
| latitude | number |
Yes | Latitude | The number of floating points. Its values range from –90 to +90. |
| longitude | number |
Yes | Longitude | The number of floating points. Its values range from –180 to +180. |
| color | string |
No | The color of the stroke | Hexadecimal |
| fillColor | string |
No | The fill color | Hexadecimal |
| radius | number |
Yes | Radius | |
| strokeWidth | number |
No | The 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.
| Property | Type | Required | Description | Remarks |
|---|---|---|---|---|
| id | number |
No | The ID of the control | This ID is returned when the control tapping event is called back. |
| position | point |
Yes | The location of the control on the map | The location of the control relative to the map. |
| iconPath | string |
Yes | Displayed icon | The 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. |
| clickable | boolean |
No | Specifies whether the control is clickable. | It is unclickable by default. |
point
| Property | Type | Description |
|---|---|---|
| longitude | number |
Longitude |
| latitude | number |
Latitude |
position
| Property | Type | Default | Description |
|---|---|---|---|
| left | number |
0 |
The distance from the left edge of the map. |
| top | number |
0 |
The distance from the top edge of the map. |
| width | number |
Image width |
The width of the control |
| height | number |
Image height |
The height of the control |
onMarkerTapEventDetail
| Param | Type |
|---|---|
| markerId | string | number |
onLabelTapEventDetail
| Param | Type |
|---|---|
| markerId | string | number |
onControlTapEventDetail
| Param | Type |
|---|---|
| controlId | string | number |
onCalloutTapEventDetail
| Param | Type |
|---|---|
| markerId | string | number |
onRegionChangeEventDetail
| Param | Type | Description | Remarks |
|---|---|---|---|
| type | string |
Triggered at the start and end of a field of view change. | begin and end |
| causedBy | string |
Causes of changes in visual field | drag, scale, update |
| detail | regionChangeDetail |
Details of the change of region |
regionChangeDetail
| Param | Type | Description |
|---|---|---|
| rotate | number |
Rotation angle |
| skew | number |
Skew angle |
onPoiTapEventDetail
| Param | Type |
|---|---|
| name | string |
| longitude | number |
| latitude | number |
API Support
| API | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | H5 | React Native |
|---|---|---|---|---|---|
| Map | ✔️ | ✔️ | ✔️ |
若有收获，就点个赞吧
0 人点赞
