# qq.createMapContext

QQ mac版本:支持

QQ windows版本:支持

# MapContext qq.createMapContext(string mapId, Object this)

创建 map 上下文 MapContext 对象。

# 参数

# string mapId

map组件的id

# Object this

在自定义组件下,当前组件实例的this,以操作组件内 map 组件

# 返回值

MapContext

# MapContext

MapContext 实例,可通过 qq.createMapContext 获取。

MapContext 通过 id 跟一个 <map> 组件绑定,操作对应的 <map> 组件。

QQ mac版本:支持

QQ windows版本:支持

# 方法

# MapContext.getCenterLocation()

获取当前地图中心的经纬度。返回的是 gcj02 坐标系,可以用于 qq.openLocation()

# MapContext.moveToLocation(Object object)

将地图中心移置当前定位点,此时需设置地图组件 show-location 为true。也支持将地图中心移动到指定位置。

# MapContext.translateMarker(Object object)

平移marker,带动画

# MapContext.includePoints(Object object)

缩放视野展示所有经纬度

# MapContext.getRegion()

获取当前地图的视野范围

# MapContext.getRotate()

获取当前地图的旋转角

# MapContext.getSkew()

获取当前地图的倾斜角

# MapContext.getScale()

获取当前地图的缩放级别

# 示例代码

<!-- map.qml -->
<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>
1
2
3
4
5
6
7
// map.js
Page({
  onReady: function (e) {
    // 使用 qq.createMapContext 获取 map 上下文
    this.mapCtx = qq.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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# MapContext.getCenterLocation

# MapContext.getCenterLocation(Object object)

获取当前地图中心的经纬度。返回的是 gcj02 坐标系,可以用于 qq.openLocation()

# 参数

# Object object
属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# object.success回调函数

# 参数

# Object res

属性 类型 说明
longitude number 经度
latitude number 纬度

# MapContext.getRegion

# MapContext.getRegion(Object object)

获取当前地图的视野范围

# 参数

# Object object
属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# object.success回调函数

# 参数

# Object res

属性 类型 说明
southwest number 西南角经纬度
northeast number 东北角经纬度

# MapContext.getRotate

# MapContext.getRotate(Object object)

获取当前地图的旋转角

# 参数

# Object object
属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# object.success回调函数

# 参数

# Object res

属性 类型 说明
rotate number 旋转角

# MapContext.getScale

# MapContext.getScale(Object object)

获取当前地图的缩放级别

# 参数

# Object object
属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# object.success回调函数

# 参数

# Object res

属性 类型 说明
scale number 缩放值

# MapContext.getSkew

# MapContext.getSkew(Object object)

获取当前地图的倾斜角

# 参数

# Object object
属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# object.success回调函数

# 参数

# Object res

属性 类型 说明
skew number 倾斜角

# MapContext.includePoints

# MapContext.includePoints(Object object)

缩放视野展示所有经纬度

# 参数

# Object object
属性 类型 默认值 必填 说明
points Array<Object> 要显示在可视区域内的坐标点列表
padding Array<number> 坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为[上,右,下,左],安卓上只能识别数组第一项,上下左右的padding一致。开发者工具暂不支持padding参数。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# object.points的结构

属性 类型 默认值 必填 说明
longitude number 经度
latitude number 纬度

# MapContext.moveToLocation

# MapContext.moveToLocation(Object object)

将地图中心移置当前定位点,此时需设置地图组件 show-location 为true。同时支持将地图中心移动到指定位置。

# 参数

# Object object
属性 类型 默认值 必填 说明
longitude number 经度
latitude number 纬度
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# MapContext.translateMarker

# MapContext.translateMarker(Object object)

平移marker,带动画

# 参数

# Object object
属性 类型 默认值 必填 说明
markerId number 指定marker
destination Object 指定 marker 移动到的目标点
autoRotate boolean 移动过程中是否自动旋转 marker
rotate number marker 的旋转角度
duration number 1000 动画持续时长,平移与旋转分别计算
animationEnd function 动画结束回调函数
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# object.destination

属性 类型 默认值 必填 说明
longitude number 经度
latitude number 纬度