Skip to main content
Version: 3.x

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

(option?: GetCenterLocationOption) => void
PropertyType
optionGetCenterLocationOption

API Support

APIWeChat Mini-ProgramH5React Native
MapContext.getCenterLocation✔️

getRegion

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

Reference

(option?: GetRegionOption) => void
PropertyType
optionGetRegionOption

API Support

APIWeChat Mini-ProgramH5React Native
MapContext.getRegion✔️

getRotate

Acquire the rotation angle of the current map

Reference

(option?: GetRotateOption) => void
PropertyType
optionGetRotateOption

API Support

APIWeChat Mini-ProgramH5React Native
MapContext.getRotate✔️

getScale

Obtains the zoom level of the current map

Reference

(option?: GetScaleOption) => void
PropertyType
optionGetScaleOption

API Support

APIWeChat Mini-ProgramH5React Native
MapContext.getScale✔️

getSkew

Acquire the tilt angle of the current map

Reference

(option?: GetSkewOption) => void
PropertyType
optionGetSkewOption

API Support

APIWeChat Mini-ProgramH5React Native
MapContext.getSkew✔️

includePoints

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

Reference

(option: IncludePointsOption) => void
PropertyType
optionIncludePointsOption

API Support

APIWeChat Mini-ProgramH5React Native
MapContext.includePoints✔️

moveToLocation

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

Reference

(option: MoveToLocationOption) => void
PropertyType
optionMoveToLocationOption

API Support

APIWeChat Mini-ProgramH5React Native
MapContext.moveToLocation✔️

translateMarker

Translates marker with animation.

Reference

(option: TranslateMarkerOption) => void
PropertyType
optionTranslateMarkerOption

API Support

APIWeChat Mini-ProgramH5React Native
MapContext.translateMarker✔️

Parameters

GetCenterLocationOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

GetCenterLocationSuccessCallback

The callback function for a successful API call

(result: GetCenterLocationSuccessCallbackResult) => void
PropertyType
resultGetCenterLocationSuccessCallbackResult

GetCenterLocationSuccessCallbackResult

PropertyTypeDescription
latitudenumberLatitude
longitudenumberLongitude
errMsgstringCall result

GetRegionOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

GetRegionSuccessCallback

The callback function for a successful API call

(result: GetRegionSuccessCallbackResult) => void
PropertyType
resultGetRegionSuccessCallbackResult

GetRegionSuccessCallbackResult

PropertyTypeDescription
northeastnumberAltitude and longitude of the Northeast corner
southwestnumberAltitude and longitude of the Southwest corner
errMsgstringCall result

GetRotateOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

GetRotateSuccessCallback

The callback function for a successful API call

(result: GetRotateSuccessCallbackResult) => void
PropertyType
resultGetRotateSuccessCallbackResult

GetRotateSuccessCallbackResult

PropertyTypeDescription
rotatenumberThe rotation angle
errMsgstringCall result

GetScaleOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

GetScaleSuccessCallback

The callback function for a successful API call

(result: GetScaleSuccessCallbackResult) => void
PropertyType
resultGetScaleSuccessCallbackResult

GetScaleSuccessCallbackResult

PropertyTypeDescription
scalenumberScaling value
errMsgstringCall result

GetSkewOption

PropertyTypeRequiredDescription
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

GetSkewSuccessCallback

The callback function for a successful API call

(result: GetSkewSuccessCallbackResult) => void
PropertyType
resultGetSkewSuccessCallbackResult

GetSkewSuccessCallbackResult

PropertyTypeDescription
skewnumberSkewing value
errMsgstringCall result

IncludePointsOption

PropertyTypeRequiredDescription
pointsMapPostion[]YesList of coordinate points to be displayed in the visible area
paddingnumber[]NoDistance 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) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

MapPostion

List of coordinate points to be displayed in the visual area

PropertyTypeDescription
latitudenumberLatitude
longitudenumberLongitude

MoveToLocationOption

PropertyTypeRequiredDescription
latitudenumberNoLatitude
longitudenumberNoLongitude
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

TranslateMarkerOption

PropertyTypeRequiredDescription
autoRotatebooleanYesSpecifies whether to automatically rotate the marker when moving
destinationDestinationOptionYesSpecifies the destination to which the marker will move
markerIdnumberYesSpecifies the marker
rotatenumberYesThe rotation angle of the marker
animationEnd(...args: any[]) => anyNoThe callback function used when an animation ends
durationnumberNoAnimation duration, calculated separately for translation and rotation
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

DestinationOption

PropertyTypeDescription
latitudenumberLatitude
longitudenumberLongitude

API Support

APIWeChat Mini-ProgramH5React Native
MapContext.getCenterLocation✔️
MapContext.getRegion✔️
MapContext.getRotate✔️
MapContext.getScale✔️
MapContext.getSkew✔️
MapContext.includePoints✔️
MapContext.moveToLocation✔️
MapContext.translateMarker✔️