文档

# 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 是 纬度

← 图片 →