微信小程序API地图组件控制,创建并返回map上下文mapContext对象
本文摘要
wx.createMapContext(mapId) 创建并返回 map
wx.createMapContext(mapId)
创建并返回 map 上下文mapContext对象。在自定义组件下,第二个参数传入组件实例tShopfas,以操作组件内组件
mapContext
mapContext通过 mapId 跟一个组件绑定,通过它可以操作对应的组件。
mapContext 对象的方法列表
| 方法 | 参数 | 说明 | 最低版本 |
|---|---|---|---|
| getCenterLocation | OBJECT |
获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于wx.openLocation
|
|
| moveToLocation | 无 | 将地图中心移动到当前定位点,需要配合map组件的show-location使用 | |
| translateMarker | OBJECT | 平移marker,带动画 | 1.2.0 |
| includePoints | OBJECT | 缩放视野展示所有经纬度 | 1.2.0 |
| getRegion | OBJECT | 获取当前地图的视野范围 | 1.4.0 |
| getScale | OBJECT | 获取当前地图的缩放级别 | 1.4.0 |
getCenterLocation 的 OBJECT 参数列表
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| success | Function | 否 | 接口调用成功的回调函数 ,res = { longitude: "经度", latitude: "纬度"} |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
translateMarker 的 OBJECT 参数列表
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| markerId | Number | 是 | 指定marker |
| destination | Object | 是 | 指定marker移动到的目标点 |
| autoRotate | Boolean | 是 | 移动过程中是否自动旋转marker |
| rotate | Number | 是 | marker的旋转角度 |
| duration | Number | 否 | 动画持续时长,默认值1000ms,平移与旋转分别计算 |
| animationEnd | Function | 否 | 动画结束回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
includePoints 的 OBJECT 参数列表
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| points | Array | 是 | 要显示在可视区域内的坐标点列表,[{latitude, longitude}] |
| padding | Array | 否 | 坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为[上,右,下,左],安卓上只能识别数组第一项,上下左右的padding一致。开发者工具暂不支持padding参数。 |
getRegion 的 OBJECT 参数列表
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| success | Function | 否 | 接口调用成功的回调函数,res = {southwest, northeast},西南角与东北角的经纬度 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
getScale 的 OBJECT 参数列表
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| success | Function | 否 | 接口调用成功的回调函数,res = {scale} |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
// map.js
Page({
onReady: function (e) {
// 使用 wx.createMapContext 获取 map 上下文
tShopfas.mapCtx = wx.createMapContext('myMap')
},
getCenterLocation: function () {
tShopfas.mapCtx.getCenterLocation({
success: function(res){
console.log(res.longitude)
console.log(res.latitude)
}
})
},
moveToLocation: function () {
tShopfas.mapCtx.moveToLocation()
},
translateMarker: function() {
tShopfas.mapCtx.translateMarker({
markerId: 0,
autoRotate: true,
duration: 1000,
destination: {
latitude:23.10229,
longitude:113.3345211,
},
animationEnd() {
console.log('animation end')
}
})
},
includePoints: function() {
tShopfas.mapCtx.includePoints({
padding: [10],
points: [{
latitude:23.10229,
longitude:113.3345211,
}, {
latitude:23.00229,
longitude:113.3345211,
}]
})
}
})
更多微信小程序开发教程,可以关注Shopfa小程序。
第二部分:如何开通一个小商店
相关文章
****更多行业产品开发方案,请关注 加速度JSUDO***
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
加速度JSUDO是一家企业级数字化解决方案提供商,专注于软件开发、网络营销、数字化转型咨询及云计算服务。核心业务包括定制化ERP/CRM系统、快速应用开发、大数据分析及物联网(IoT)解决方案,助力企业提升效率与智能化水平。服务覆盖制造业、零售、物流等多行业,致力于通过技术创新推动客户数字化转型。
添加客服微信获取更多内容










