• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序API 地图组件控制

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

wx.createMapContext(mapId)


创建并返回 map 上下文 mapContext 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 <map/> 组件


mapContext

mapContext通过 mapId 跟一个<map/>组件绑定,通过它可以操作对应的<map/>组件。

mapContext 对象的方法列表

方法参数说明最低版本
getCenterLocationOBJECT获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于 wx.openLocation 
moveToLocation将地图中心移动到当前定位点,需要配合map组件的show-location使用 
translateMarkerOBJECT平移marker,带动画1.2.0
includePointsOBJECT缩放视野展示所有经纬度1.2.0
getRegionOBJECT获取当前地图的视野范围1.4.0
getScaleOBJECT获取当前地图的缩放级别1.4.0

getCenterLocation 的 OBJECT 参数列表

参数类型必填说明
successFunction接口调用成功的回调函数 ,res = { longitude: "经度", latitude: "纬度"}
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

translateMarker 的 OBJECT 参数列表

参数类型必填说明
markerIdNumber指定marker
destinationObject指定marker移动到的目标点
autoRotateBoolean移动过程中是否自动旋转marker
rotateNumbermarker的旋转角度
durationNumber动画持续时长,默认值1000ms,平移与旋转分别计算
animationEndFunction动画结束回调函数
failFunction接口调用失败的回调函数

includePoints 的 OBJECT 参数列表

参数类型必填说明
pointsArray要显示在可视区域内的坐标点列表,[{latitude, longitude}]
paddingArray坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为[上,右,下,左],安卓上只能识别数组第一项,上下左右的padding一致。开发者工具暂不支持padding参数。

getRegion 的 OBJECT 参数列表

参数类型必填说明
successFunction接口调用成功的回调函数,res = {southwest, northeast},西南角与东北角的经纬度
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

getScale 的 OBJECT 参数列表

参数类型必填说明
successFunction接口调用成功的回调函数,res = {scale}
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)


示例代码:

<!-- 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,
      }]
    })
  }
})



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序API 监听实时地理位置发布时间:2022-02-02
下一篇:
微信小程序API 查看位置发布时间:2022-02-02
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap