title: MapContext

sidebar_label: MapContext

MapContext instance, which can be obtained by Taro.createMapContext. MapContext is bound to a <map/> component by id, to operate the corresponding <map/> component.

Methods

getCenterLocation

Obtain the altitude and longitude of the current map center. The gcj02 coordinate system is returned, which can be used for wx.openLocation()

Reference

  1. (option?: GetCenterLocationOption) => void
Property Type
option GetCenterLocationOption

API Support

API WeChat Mini-Program H5 React Native
MapContext.getCenterLocation ✔️

getRegion

Acquire the scope of the field of view of the current map

Reference

  1. (option?: GetRegionOption) => void
Property Type
option GetRegionOption

API Support

API WeChat Mini-Program H5 React Native
MapContext.getRegion ✔️

getRotate

Acquire the rotation angle of the current map

Reference

  1. (option?: GetRotateOption) => void
Property Type
option GetRotateOption

API Support

API WeChat Mini-Program H5 React Native
MapContext.getRotate ✔️

getScale

Obtains the zoom level of the current map

Reference

  1. (option?: GetScaleOption) => void
Property Type
option GetScaleOption

API Support

API WeChat Mini-Program H5 React Native
MapContext.getScale ✔️

getSkew

Acquire the tilt angle of the current map

Reference

  1. (option?: GetSkewOption) => void
Property Type
option GetSkewOption

API Support

API WeChat Mini-Program H5 React Native
MapContext.getSkew ✔️

includePoints

Zooms in/out the view to show all latitudes and longitudes.

Reference

  1. (option: IncludePointsOption) => void
Property Type
option IncludePointsOption

API Support

API WeChat Mini-Program H5 React Native
MapContext.includePoints ✔️

moveToLocation

Moves the map center to the current location. Use with the show-location of the map component.

Reference

  1. (option: MoveToLocationOption) => void
Property Type
option MoveToLocationOption

API Support

API WeChat Mini-Program H5 React Native
MapContext.moveToLocation ✔️

translateMarker

Translates marker with animation.

Reference

  1. (option: TranslateMarkerOption) => void
Property Type
option TranslateMarkerOption

API Support

API WeChat Mini-Program H5 React Native
MapContext.translateMarker ✔️

Parameters

GetCenterLocationOption

Property Type Required Description
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

GetCenterLocationSuccessCallback

The callback function for a successful API call

  1. (result: GetCenterLocationSuccessCallbackResult) => void
Property Type
result GetCenterLocationSuccessCallbackResult

GetCenterLocationSuccessCallbackResult

Property Type Description
latitude number Latitude
longitude number Longitude
errMsg string Call result

GetRegionOption

Property Type Required Description
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

GetRegionSuccessCallback

The callback function for a successful API call

  1. (result: GetRegionSuccessCallbackResult) => void
Property Type
result GetRegionSuccessCallbackResult

GetRegionSuccessCallbackResult

Property Type Description
northeast number Altitude and longitude of the Northeast corner
southwest number Altitude and longitude of the Southwest corner
errMsg string Call result

GetRotateOption

Property Type Required Description
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

GetRotateSuccessCallback

The callback function for a successful API call

  1. (result: GetRotateSuccessCallbackResult) => void
Property Type
result GetRotateSuccessCallbackResult

GetRotateSuccessCallbackResult

Property Type Description
rotate number The rotation angle
errMsg string Call result

GetScaleOption

Property Type Required Description
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

GetScaleSuccessCallback

The callback function for a successful API call

  1. (result: GetScaleSuccessCallbackResult) => void
Property Type
result GetScaleSuccessCallbackResult

GetScaleSuccessCallbackResult

Property Type Description
scale number Scaling value
errMsg string Call result

GetSkewOption

Property Type Required Description
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

GetSkewSuccessCallback

The callback function for a successful API call

  1. (result: GetSkewSuccessCallbackResult) => void
Property Type
result GetSkewSuccessCallbackResult

GetSkewSuccessCallbackResult

Property Type Description
skew number Skewing value
errMsg string Call result

IncludePointsOption

Property Type Required Description
points MapPostion[] Yes List of coordinate points to be displayed in the visible area
padding number[] No Distance between the edge of the rectangle formed by coordinate points and the edge of the map (in pixel). The format is [top, right, bottom, left]. Only the first item of the array can be identified on Android. The padding is consistent for top, bottom, left, and right. Padding parameters are currently not supported on developer tools.
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

MapPostion

List of coordinate points to be displayed in the visual area

Property Type Description
latitude number Latitude
longitude number Longitude

MoveToLocationOption

Property Type Required Description
latitude number No Latitude
longitude number No Longitude
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

TranslateMarkerOption

Property Type Required Description
autoRotate boolean Yes Specifies whether to automatically rotate the marker when moving
destination DestinationOption Yes Specifies the destination to which the marker will move
markerId number Yes Specifies the marker
rotate number Yes The rotation angle of the marker
animationEnd (…args: any[]) => any No The callback function used when an animation ends
duration number No Animation duration, calculated separately for translation and rotation
complete (res: any) => void No The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail (res: any) => void No The callback function for a failed API call
success (res: Result) => void No The callback function for a successful API call

DestinationOption

Property Type Description
latitude number Latitude
longitude number Longitude

API Support

API WeChat Mini-Program H5 React Native
MapContext.getCenterLocation ✔️
MapContext.getRegion ✔️
MapContext.getRotate ✔️
MapContext.getScale ✔️
MapContext.getSkew ✔️
MapContext.includePoints ✔️
MapContext.moveToLocation ✔️
MapContext.translateMarker ✔️