pp电子

登录
免费开通

微信小程序API地图组件控制,建设并返回map上下文mapContext工具

wx.createMapContext(mapId)

微信小程序API地图组件控制,建设并返回map上下文mapContext工具


建设并返回 map 上下文 mapContext 工具。。。。。。在自界说组件下, ,第二个参数传入组件实例this, ,以操作组件内 <map/> 组件

 

mapContext

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

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一致。。。。。??? ???⒄吖ぞ咴莶恢С謕adding参数。。。。。。

getRegion 的 OBJECT 参数列表

参数 类型 必填 说明
success Function 接口挪用乐成的回调函数, ,res = {southwest, northeast}, ,西南角与东北角的经纬度
fail Function 接口挪用失败的回调函数
complete Function 接口挪用竣事的回调函数(挪用乐成、失败都会执行)

getScale 的 OBJECT 参数列表

参数 类型 必填 说明
success Function 接口挪用乐成的回调函数, ,res = {scale}
fail Function 接口挪用失败的回调函数
complete Function 接口挪用竣事的回调函数(挪用乐成、失败都会执行)

 

示例代码:

 

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

 

更多微信小程序开发教程, ,可以关注。。。。。。
【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿, ,由于未联系到知识产权人或未发明有关知识产权的挂号, ,若有知识产权人并不肯意我们使用, ,若是有侵权请连忙联系。。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真, ,仅系客观性形貌, ,如您需要相识该类商品/服务详细的资讯, ,请您直接与该类商品/服务的提供者联系。。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商, ,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。。

KESION 一直通过手艺立异, ,提供产品和服务, ,助力企业向数字化转型, ,通过科技驱动商业刷新, ,让商业变得更智慧!



▼点击进入pp电子官网相识更多



上/下篇
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序API地图组件控制,建设并返回map上下文mapC