Map

Map. Related API: Taro.createMapContext.

Reference

Type

ComponentType<MapProps>

Examples

General usage

React

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

Vue

<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

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

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	{ left: string | number; right: string | number; top: string | number; bottom: string | number; }		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	{ x: number; y: number; }	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{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.
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	[{latitude: 0, longitude: 0}]
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	[{latitude: 0, longitude: 0}]
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	✔️	✔️	✔️