May 19, 2021 WeChat Mini Program Development Document
Create and return the map
mapContext
object.
Under the custom component, the second parameter is passed in to the component instance this to manipulate the
<map/>
within the component
mapContext
mapContext
binds to a component through mapId, through which it
<map/>
can manipulate the corresponding component.
<map/>
A list of methods for mapContext objects
| Method | Parameters | Description | The lowest version |
|---|---|---|---|
| getCenterLocation | OBJECT |
Gets the latitude and longitude of the center of the current map, returning the gcj02 coordinate system that
wx.openLocation
|
|
| moveToLocation | No | Moving the map center to the current anchor requires the show-location of the map component | |
| translateMarker | OBJECT | Pan marker with animation | 1.2.0 |
| includePoints | OBJECT | Zoom the field of view to show all latitudes and longitudes | 1.2.0 |
| getRegion | OBJECT | Gets the field of view of the current map | 1.4.0 |
| getScale | OBJECT | Gets the zoom level of the current map | 1.4.0 |
GetCenterLocation's list of OBJECT parameters
| Parameters | Type | Required | Description |
|---|---|---|---|
| success | Function | Whether | Interface calls a successful callback function, res s longitude: "longitude", latitude: "latitude". |
| fail | Function | Whether | The interface calls the failed callback function |
| complete | Function | Whether | Callback function at end of interface call (call succeeds, fails are executed) |
A list of OBJECT parameters for translateMarker
| parameter | type | Required | illustrate |
|---|---|---|---|
| markerId | Number | Yes | MARKER |
| destination | Object | Yes | Specifies the target point to MARKER |
| autoRotate | Boolean | Yes | Whether automatic rotation of Marker during movement |
| rotate | Number | Yes | MARKER rotation angle |
| duration | Number | no | Animation continues to time, default 1000ms, translation and rotation separately |
| animationEnd | Function | no | Animation end callback function |
| fail | Function | no | Interface call failed callback function |
Object Parameter List of IncludePoints
| parameter | type | Required | illustrate |
|---|---|---|---|
| points | Array | Yes | To display the list of coordinate points in the visible area, [{LATITITUDE, longitude}] |
| padding | Array | Whether | The distance, in pixels, from the edge of the rectangle formed by the coordinate points to the edge of the map. T he format is (top, right, bottom, left), Android can only recognize the first item of the array, up and down left and right padding consistent. Developer tools do not support padding parameters at this time. |
GetRegion's list of OBJECT parameters
| Parameters | Type | Required | Description |
|---|---|---|---|
| success | Function | Whether | The interface calls the successful callback function, res s |
| fail | Function | Whether | The interface calls the failed callback function |
| complete | Function | Whether | Callback function at end of interface call (call succeeds, fails are executed) |
GetScale's list of OBJECT parameters
| Parameters | Type | Required | Description |
|---|---|---|---|
| success | Function | Whether | Interface calls successful callback function, res s. |
| fail | Function | Whether | The interface calls the failed callback function |
| complete | Function | Whether | Callback function at end of interface call (call succeeds, fails are executed) |
Example code:
<!-- map.wxml -->
<map id="myMap" show-location />
<button type="primary" bindtap="getCenterLocation">获取位置</button>
<button type="primary" bindtap="moveToLocation">移动位置</button>
<button type="primary" bindtap="translateMarker">移动标注</button>
<button type="primary" bindtap="includePoints">缩放视野展示所有经纬度</button>// map.js
Page({
onReady: function (e) {
// 使用 wx.createMapContext 获取 map 上下文
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,
}]
})
}
})