微信小程序> 小程序开发API之地图wx.createMapContext及MapContext实例

小程序开发API之地图wx.createMapContext及MapContext实例

浏览量:12034 时间: 来源:钢丝球 M.Siebel

效果展示


小程序

wx.createMapContext(string mapId, Object this)

创建 map 上下文 MapContext 对象。
参数 string mapId
组件的 id
Object this
在自定义组件下,当前组件实例的this,以操作组件内
组件
返回值
MapContext

MapContext

MapContext 实例,可通过 wx.createMapContext 获取。
mapContext 通过 id 跟一个 组件绑定,操作对应的 组件。

方法

MapContext.getCenterLocation()

获取当前地图中心的经纬度。返回的是 gcj02 坐标系,可以用于 wx.openLocation()
getCenterLocation参数小程序

object.success 回调函数参数Object res小程序

MapContext.moveToLocation()

将地图中心移动到当前定位点。需要配合map组件的show-location使用

MapContext.translateMarker(Object object)

平移marker,带动画
translateMarker参数小程序

object.destination 的结构小程序

MapContext.includePoints(Object object)

缩放视野展示所有经纬度
includePoints参数小程序

object.points 的结构小程序

MapContext.getRegion()

获取当前地图的视野范围
getRegion参数小程序

object.success 回调函数参数Object res小程序

MapContext.getScale()

获取当前地图的缩放级别
getScale参数小程序

object.success 回调函数参数Object res小程序

示例:
效果展示


小程序

代码
index.wxml

<map   id="myMap"   style="width: 710rpx; height: 250px;"   latitude="{{latitude}}"   longitude="{{longitude}}"   markers="{{markers}}"   show-location></map><button bindtap="getCenterLocation" type="primary">获取当前地图中心的经纬度</button><button bindtap="moveToLocation"  type="primary">将地图中心移动到当前定位点</button><button bindtap="translateMarker" type="primary">平移marker,带动画</button><button bindtap="includePoints" type="primary">缩放视野展示所有经纬度</button><button bindtap="scaleClick" type="primary">获取当前地图的缩放级别</button><button bindtap="getRegionClick" type="primary">获取当前地图的视野范围</button>

index.wxss

map{  margin: 20rpx;}button{  margin: 20rpx;}

index.js

Page({  data: {    latitude: 23.099994,    longitude: 113.324520,    markers: [{      id: 1,      latitude: 23.099994,      longitude: 113.324520,      name: '腾讯'    }],  },  onReady: function (e) {    //创建 map 上下文 MapContext 对象。    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()  },  //平移marker,带动画  translateMarker: function() {    this.mapCtx.translateMarker({      markerId: 1,      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,      }]    })  },  //获取当前地图的缩放级别  scaleClick: function(){    this.mapCtx.getScale({      success: function (res) {        console.log(res.scale)      }    })  },  //获取当前地图的视野范围  getRegionClick: function () {    this.mapCtx.getRegion({      success: function (res) {        console.log(res.southwest)        console.log(res.northeast)      }    })  }})





版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎