createMapContext
This API is used via wx.createMapContext(string mapId, Object this).
Parameter and Description: string mapId, ID of the map component; Object this, "this" of the current component instance under custom components, used to operate the map component within.
MapContext
Note:
Unless otherwise specified, the support level for MapContext methods by mobile manufacturers is assumed to be:
System Map (only supported by iOS): Yes;
Google Map (Supported by Android, IDE): Yes;
Huawei Map (only supported by Android): Yes;
Tencent Map: Yes;
Baidu Map: Yes;
Amap: Yes.
Exclusive for China：Tencent Map、Baidu Map.
MapContext is bound to a map component via an id, thereby manipulating the corresponding <map> component.
Sample Code
<!-- map.wxml -->
<map id="myMap" show-location />
<button type="primary" bindtap="getCenterLocation">Get location</button>
<button type="primary" bindtap="moveToLocation">Change location</button>
<button type="primary" bindtap="translateMarker">Move Marker</button>
<button type="primary" bindtap="includePoints">Scale the field of view to display all longitudes and latitudes.</button>
Page({
onReady: function (e) {
this.mapCtx = wx.createMapContext('myMap')
},
getCenterLocation: function () {
this.mapCtx.getCenterLocation({
success: function(res){
console.log(res.longitude)
console.log(res.latitude)
}
})
},
moveToLocation: function () {
this.mapCtx.moveToLocation()
},
translateMarker: function() {
this.mapCtx.translateMarker({
markerId: 0,
autoRotate: true,
duration: 1000,
destination: {
latitude:23.10229,
longitude:113.3345211,
},
animationEnd() {
console.log('animation end')
}
})
},
includePoints: function() {
this.mapCtx.includePoints({
padding: [10],
points: [{
latitude:23.10229,
longitude:113.3345211,
}, {
latitude:23.00229,
longitude:113.3345211,
}]
})
}
})
.addArc
The method is used via MapContext.addArc(Object object).
Note：
Support: Not supported.
Feature Description: An arc line is added, and either a waypoint or an angle must be set. The waypoint must be within the valid coordinate range of the start and end points, otherwise a correct arc line cannot be generated. When setting the angle, the angle is prioritized. The angle is defined as the angle rotated counterclockwise from the starting point to the end point, tangent to the starting point. This feature is temporarily unsupported on the tool side.
Parameter and Description: Object
|
id | number | - | Yes | Arc ID |
start | Object | - | Yes | Start point |
end | Object | - | Yes | End point |
pass | Object | - | No | Waypoint |
angle | number | 0 | No | Included Angle |
width | number | 5 | No | Line Width |
color | number | #000000 | No | Color of the line |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Structure attributes of "start"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
Structure attributes of "end"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
Structure attributes of "pass"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
.addCustomLayer
The method is used via : MapContext.addCustomLayer(Object object)
Note：
Support: Not supported.
Feature Description: Adds a personalized layer.
Parameter and Description: Object
|
layerId | string | - | Yes | ID of personalized layer. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.addGroundOverlay
The method is used via MapContext.addGroundOverlay(Object object).
Note：
Support: supported by IDE, not supported by Android and ios.
Feature Description: Creates a custom image layer, which scales in accordance with the map's zoom level.
Parameter and Description: Object
|
id | String | - | Yes | ID of image layer |
src | String | - | Yes | Image path, supporting network images, temporary paths, and code package paths. |
bounds | Object | - | Yes | Longitude and latitude range covered by the image |
visible | Boolean | true | No | Visible or not |
zIndex | Number | 1 | No | Layer Rendering Sequence |
opacity | Number | 1 | No | Layer Transparency |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Structure attributes of "bounds"
|
southwest | Object | - | Yes | Southwest corner's longitude and latitude |
northeast | Object | - | Yes | Northeast corner's longitude and latitude |
Structure attributes of "southwest"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
Structure attributes of "northeast"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
.addMarkers
The method is used via MapContext.addMarkers(Object object).
Feature Description: Adds a marker.
Parameter and Description: Object.
|
markers | array | - | Yes | Same as the marker attribute passed into the map component. |
clear | boolean | false | No | Whether to clear all markers on the map first. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.eraseLines
The method is used via MapContext.eraseLines(Object object).
Feature Description: Erases or grays out the lines that have been added to the map.
Parameter and Description: Object
|
lines | Array.<Object> | - | Yes | |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Structure attributes of "lines"
|
id | number | - | Yes | Line segment ID |
index | number | - | Yes | Specifies a section of the line segment, with the starting point index of the line being 0. |
point | Object | - | Yes | Specifies a point within a section of the line segment. |
clear | boolean | true | No | True for erasure, false for graying out. |
Structural attributes of a "point".
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
.fromScreenLocation
The method is used via MapContext.fromScreenLocation(Object object).
Feature Description: Gets the corresponding latitude and longitude of a point on the screen, with the coordinate origin at the top left corner of the map.
Parameter and Description: Object
|
x | number | - | Yes | X-coordinate value. |
y | number | - | Yes | Y-coordinate value. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Parameters for object.success callback function: Object res.
|
latitude | number | Latitude |
longitude | number | Longitude |
.getCenterLocation
This method is used via MapContext.getCenterLocation(Object object).
Feature Description: Gets the latitude and longitude of the current map center. The return is in the gcj02 coordinate system, which can be used for wx.openLocation(). Parameter and Description: Object
|
iconPath | string | - | No | Image path, supporting network paths, local paths, and code package paths. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Parameters for object.success callback function: Object res.
|
longitude | number | Longitude |
latitude | number | Latitude |
.getRegion
This method is used via MapContext.getRegion(Object object).
Feature Description: Gets the field of view range of the current map.
Parameter and Description: Object
|
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Parameters for object.success callback function: Object res.
|
southwest | object | Southwest corner's longitude and latitude |
northeast | object | Northeast corner's longitude and latitude |
Structure attributes of "southwest"
|
longitude | number | Longitude |
latitude | number | Latitude |
Structure attributes of "northeast"
|
longitude | number | Longitude |
latitude | number | Latitude |
.getRotate
Note：
Not supported by iOS.
This method is used via MapContext.getRotate(Object object).
Feature Description: Gets the rotation angle of the current map.
Parameter and Description: Object
|
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Parameters for object.success callback function: Object res.
|
rotate | number | Rotation Angle |
.getScale
This method is used via MapContext.getScale(Object object).
Feature Description: Gets the scaling level of the current map.
Parameter and Description: Object
|
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Parameters for object.success callback function: Object res.
.getSkew
Note：
Not supported by iOS.
This method is used via MapContext.getSkew(Object object).
Feature Description: Gets the tilt angle of the current map.
Parameter and Description: Object
|
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Parameters for object.success callback function: Object res.
.includePoints
Note：
Not supported by iOS.
The method is used via MapContext.includePoints(Object object).
Feature Description: Scales the view field to display all latitudes and longitudes.
Parameter and Description: Object
|
points | array. | - | Yes | List of coordinate points to be displayed within the visible area. |
padding | array. | - | No | The distance from the edges of the rectangle formed by the coordinate points to the edge of the map, measured in pixels. The format is [top, right, bottom, left]. On Android, only the first item in the array can be recognized, and the padding for top, bottom, left, and right is consistent. The developer tool does not currently support the padding parameter. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Structure attributes of "points"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
.initMarkerCluster
The method is used via MapContext.initMarkerCluster(Object object).
Feature Description: Initializes the configuration for point clustering. The default configuration is used if this feature is not called.
Parameter and Description: Object
|
enableDefaultStyle | boolean | true | No | Enable the default clustering style. |
zoomOnClick | boolean | true | No | Whether to implement cluster separation when a clustered marker point is clicked. |
gridSize | number | 60 | No | The aggregatable distance (measured in pixels) for the clustering algorithm, that is, points closer than this value will be clustered together. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.moveAlong
This method is used via MapContext.moveAlong(Object object).
Feature Description: Moves the marker along a specified path, suitable for scenarios such as trajectory playback. A callback event is triggered upon animation completion. If the animation is in progress and the moveAlong method is called again for the same marker, the previous animation will be interrupted.
Parameter and Description: Object
|
markerId | number | - | Yes | Specify a marker. |
path | array | - | Yes | The coordinate string of the moving path, with the coordinate point format being {longitude, latitude}. |
autoRotate | boolean | true | No | Automatically adjust the rotation angle of the marker based on the path direction. |
duration | number | - | Yes | The duration of smooth movement. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.moveToLocation
This method is used via MapContext.moveToLocation(Object object).
Feature Description: Moves the map center to the current location point, when the map component "show-location" must be set to true.
Parameter and Description: Object
|
longitude | number | - | No | Longitude |
latitude | number | - | No | Latitude |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.on
This method is used via MapContext.on(string event, function callback).
Feature Description: Monitors map events.
Parameter 1: visualLayerEvent, a unified callback exit for the visual layer, supported from version 1.5.16.
|
layerId | String | Layer ID |
eventType | String | Event type |
eventInfo | String | Event information |
Parameter 2: markerClusterCreate, triggered when a new cluster is generated due to scaling or dragging, only returning information about the newly created cluster.
|
clusters | Array<ClusterInfo> | Cluster data |
Parameter 3: markerClusterClick, click events of the cluster.
|
cluster | ClusterInfo | Cluster |
ClusterInfo Structure
|
clusterId | Number | Cluster ID |
center | LatLng | Cluster coordinates |
markerIds | Array<Number> | Array of point marker data within the aggregation cluster |
Parameter 4: string event, the name of the event; function callback, the callback function for the event.
The valid values for the event include markerClusterCreate, markerClusterClick, and visualLayerEvent.
Sample Code
MapContext.on('visualLayerEvent', (res) => {})
MapContext.on('markerClusterCreate', (res) => {})
MapContext.on('markerClusterClick', (res) => {})
.openMapApp
This method is used via MapContext.openMapApp(Object object).
Feature Description: Launches the map App for navigation.
Parameter and Description: Object
|
longitude | number | - | Yes | Destination Longitude |
latitude | number | - | Yes | Destination Latitude |
destination | string | - | Yes | Destination Name |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.removeArc
This method is used via MapContext.removeArc(Object object).
Note：
Support: Not supported.
Feature Description: Removes the arc line.
Parameter and Description: Object
|
id | number | - | Yes | Arc ID |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.removeCustomLayer
The method is used via MapContext.removeCustomLayer(Object object).
Note：
Support: Not supported.
Feature Description: Removes personalized image layers.
Parameter and Description: Object
|
layerId | string | - | Yes | ID of personalized layer. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.removeGroundOverlay
This method is used via MapContext.removeGroundOverlay(Object object).
Note：
Support: supported by IDE, not supported by Android and ios.
Feature Description: Removes custom image layers.
Parameter and Description: Object
|
id | String | - | Yes | ID of image layer |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.removeMarkers
This method is used via MapContext.removeMarkers(Object object).
Feature Description: Removes markers.
Parameter and Description: Object
|
markerIds | array | - | Yes | Collection of marker IDs. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.setBoundary
This method is used via MapContext.setBoundary(Object object).
Feature Description: Restricts the map's display range. This interface will also limit the map's minimum scaling integer level.
Parameter and Description: Object
|
southwest | Object | - | Yes | Southwest corner's longitude and latitude |
northeast | Object | - | Yes | Northeast corner's longitude and latitude |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Structure attributes of "southwest"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
Structure attributes of "northeast"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
.setCenterOffset
This method is used via MapContext.setCenterOffset(Object object).
Feature Description: Sets the offset of the map center point, with growth towards the back and downwards, within a screen ratio range of (0.25 - 0.75), default offset being [0.5, 0.5].
Parameter and Description: Object
|
offset | Array.<number> | - | Yes | Offset value, a two-element array. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.setLocMarkerIcon
This method is used via MapContext.setLocMarkerIcon(Object object).
Feature Description: Sets the location point icon, supporting network paths, local paths, and code package paths.
Parameter and Description: Object
|
iconPath | string | - | No | Image path, supporting network paths, local paths, and code package paths. |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
.toScreenLocation
The method is used via MapContext.toScreenLocation(Object object).
Feature Description: Gets the screen coordinates corresponding to the latitude and longitude, with the coordinate origin at the top left corner of the map.
Parameter and Description: Object
|
latitude | Number | - | Yes | Latitude |
longitude | Number | - | Yes | Longitude |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Parameters for object.success callback function: Object res.
|
x | number | X-coordinate value. |
y | number | Y-coordinate value. |
.translateMarker
The method is used via MapContext.translateMarker(Object object).
Feature Description: Translates the marker, with iOS and IDE supporting animation effects. Android platform does not currently support animation effects.
Parameter and Description: Object
|
markerId | number | - | Yes | Specify a marker. |
destination | object | - | Yes | Specify the target point for the marker to move to. |
animationEnd | function | - | No | Animation completion callback function |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Structure attributes of "destination"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
.updateGroundOverlay
This method is used via MapContext.updateGroundOverlay(Object object).
Note：
Support: supported by IDE, not supported by Android and ios.
Feature Description: Updates custom image layers.
Parameter and Description: Object
|
id | String | - | Yes | ID of image layer |
src | String | - | Yes | Image path, supporting network images, temporary paths, and code package paths. |
bounds | Object | - | Yes | Longitude and latitude range covered by the image |
visible | Boolean | true | No | Visible or not |
zIndex | Number | 1 | No | Layer Rendering Sequence |
opacity | Number | 1 | No | Layer Transparency |
success | function | - | No | Callback Function of Successful Interface Call |
fail | function | - | No | Callback Function of Failing Interface Call |
complete | function | - | No | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Structure attributes of "bounds"
|
southwest | Object | - | Yes | Southwest corner's longitude and latitude |
northeast | Object | - | Yes | Northeast corner's longitude and latitude |
Structure attributes of "southwest"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
Structure attributes of "northeast"
|
longitude | number | - | Yes | Longitude |
latitude | number | - | Yes | Latitude |
