# MapContext

> 相关文档: [map](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)

MapContext 实例，可通过 [wx.createMapContext](/miniprogram/dev/api/media/map/wx.createMapContext) 获取。

[MapContext](/miniprogram/dev/api/media/map/MapContext) 通过 `id` 跟一个 [map](https://developers.weixin.qq.com/miniprogram/dev/component/map.html) 组件绑定，操作对应的 [map](https://developers.weixin.qq.com/miniprogram/dev/component/map.html) 组件。

## 方法

### [MapContext.getCenterLocation(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.getCenterLocation)

获取当前地图中心的经纬度。返回的是 gcj02 坐标系，可以用于 [wx.openLocation()](/miniprogram/dev/api/location/wx.openLocation)

### [MapContext.setLocMarkerIcon(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.setLocMarkerIcon)

设置定位点图标，支持网络路径、本地路径、代码包路径

### [MapContext.moveToLocation(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.moveToLocation)

将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。[2.8.0](1003706) 起支持将地图中心移动到指定位置。

### [MapContext.translateMarker(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.translateMarker)

平移marker，带动画。

### [MapContext.moveAlong(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.moveAlong)

沿指定路径移动 `marker`，用于轨迹回放等场景。动画完成时触发回调事件，若动画进行中，对同一 `marker` 再次调用 `moveAlong` 方法，前一次的动画将被打断。

### [MapContext.includePoints(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.includePoints)

缩放视野展示所有经纬度

### [MapContext.getRegion()](/miniprogram/dev/api/media/map/MapContext/MapContext.getRegion)

获取当前地图的视野范围

### [MapContext.getRotate()](/miniprogram/dev/api/media/map/MapContext/MapContext.getRotate)

获取当前地图的旋转角

### [MapContext.getSkew()](/miniprogram/dev/api/media/map/MapContext/MapContext.getSkew)

获取当前地图的倾斜角

### [MapContext.getScale()](/miniprogram/dev/api/media/map/MapContext/MapContext.getScale)

获取当前地图的缩放级别

### [MapContext.setCenterOffset(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.setCenterOffset)

设置地图中心点偏移，向后向下为增长，屏幕比例范围(0.25~0.75)，默认偏移为[0.5, 0.5]

### [MapContext.removeCustomLayer(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.removeCustomLayer)

移除个性化图层。

### [MapContext.addCustomLayer(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.addCustomLayer)

添加个性化图层。图层创建[参考文档](https://lbs.qq.com/dev/console/customLayer/create)

### [MapContext.addGroundOverlay(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.addGroundOverlay)

创建自定义图片图层，图片会随着地图缩放而缩放。

### [MapContext.addVisualLayer(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.addVisualLayer)

添加可视化图层。需要刷新时，interval 可设置的最小值为 15 s。

### [MapContext.removeVisualLayer(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.removeVisualLayer)

移除可视化图层。

### [MapContext.executeVisualLayerCommand(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.executeVisualLayerCommand)

执行可视化图层指令，结合 `MapContext.on('visualLayerEvent')` 监听事件使用。

### [MapContext.addArc(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.addArc)

添加弧线，途经点与夹角必须设置一个。途经点必须在起终点有效坐标范围内，否则不能生成正确的弧线，同时设置夹角角度时，以夹角角度为准。夹角定义为起点到终点，与起点外切线逆时针旋转的角度。工具侧暂未支持。

### [MapContext.removeArc(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.removeArc)

删除弧线。工具侧暂未支持。

### [MapContext.setBoundary(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.setBoundary)

限制地图的显示范围。此接口同时会限制地图的最小缩放整数级别。

### [MapContext.updateGroundOverlay(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.updateGroundOverlay)

更新自定义图片图层。

### [MapContext.removeGroundOverlay(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.removeGroundOverlay)

移除自定义图片图层。

### [MapContext.toScreenLocation(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.toScreenLocation)

获取经纬度对应的屏幕坐标，坐标原点为地图左上角。

### [MapContext.fromScreenLocation(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.fromScreenLocation)

获取屏幕上的点对应的经纬度，坐标原点为地图左上角。

### [MapContext.openMapApp(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.openMapApp)

拉起地图APP选择导航。

### [MapContext.addMarkers(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.addMarkers)

添加 marker。

### [MapContext.removeMarkers(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.removeMarkers)

移除 marker。

### [MapContext.initMarkerCluster(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.initMarkerCluster)

初始化点聚合的配置，未调用时采用默认配置。

### [MapContext.on(string event, function callback)](/miniprogram/dev/api/media/map/MapContext/MapContext.on)

监听地图事件。

### visualLayerEvent

可视化图层 visualLayer 统一回调出口，[2.26.0](1003706) 起支持。

#### 返回参数

| 参数      | 类型   | 说明     |
| --------- | ------ | -------- |
| layerId   | String | 图层 id  |
| eventType | String | 事件类型 |
| eventInfo | String | 事件信息 |

### markerClusterCreate

缩放或拖动导致新的聚合簇产生时触发，仅返回新创建的聚合簇信息。

#### 返回参数

| 参数     | 类型                 | 说明       |
| -------- | -------------------- | ---------- |
| clusters | `Array<ClusterInfo>` | 聚合簇数据 |

### markerClusterClick

聚合簇的点击事件。

#### 返回参数

| 参数      | 类型          | 说明      |
| --------- | ------------- | --------- |
| cluster   | ClusterInfo   | 聚合簇    |

#### ClusterInfo 结构

| 参数      | 类型            | 说明                       |
| --------- | --------------- | -------------------------- |
| clusterId | Number          | 聚合簇的 id                |
| center    | LatLng          | 聚合簇的坐标               |
| markerIds | `Array<Number>` | 该聚合簇内的点标记数据数组 |

### markerCollisionStatusChange

marker 参与碰撞后隐藏时的回调，[3.4.3](1003706) 起支持。

#### 返回参数

| 参数      | 类型   | 说明     |
| --------- | ------ | -------- |
| show   | `Array<Number>` | 碰撞时隐藏后又显示的 `markerIds` |
| hide | `Array<Number>` | 碰撞时被隐藏的 `markerIds`       |

### [MapContext.eraseLines(Object object)](/miniprogram/dev/api/media/map/MapContext/MapContext.eraseLines)

擦除或置灰已添加到地图中的线段。

## 示例代码

[在开发者工具中预览效果](https://developers.weixin.qq.com/s/3uVxpmmT6wY9)

```html
<!-- 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>
```

```javascript
// 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,
      }]
    })
  }
})
```