MapContext

MapContext 实例，可通过 mc.createMapContext获取。

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

方法

MapContext.getCenterLocation(Object object)

获取当前地图中心的经纬度。返回的坐标系参考 map 组件类型说明。

Object object 参数

MapContext.setLocMarkerIcon(Object object)

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

Object object 参数

MapContext.moveToLocation(Object object)

将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。

Object object 参数

MapContext.translateMarker(Object object)

平移marker。

Object object 参数

MapContext.moveAlong(Object object)

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

Object object 参数

MapContext.includePoints(Object object)

缩放视野展示所有经纬度

Object object 参数

MapContext.getRegion(Object object)

获取当前地图的视野范围

Object object 参数

Object.success(Object res) | 属性 | 类型 | 说明 | | :--------------- | :------ | :----------------------- | | southwest | Object | 西南角经纬度, 格式{longitude, latitude} | | northeast | Object | 东北角经纬度, 格式{longitude, latitude} |

MapContext.getRotate(Object object)

获取当前地图的旋转角

Object object 参数

Object.success(Object res) | 属性 | 类型 | 说明 | | :--------------- | :------ | :----------------------- | | rotate | Number | 旋转角 |

MapContext.getSkew(Object object)

获取当前地图的倾斜角

Object object 参数

Object.success(Object res) | 属性 | 类型 | 说明 | | :--------------- | :------ | :----------------------- | | skew | Number | 倾斜角 |

MapContext.getScale(Object object)

获取当前地图的缩放级别

Object object 参数

Object.success(Object res) | 属性 | 类型 | 说明 | | :--------------- | :------ | :----------------------- | | scale | Number | 缩放值 |

MapContext.setCenterOffset(Object object)

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

Object object 参数

MapContext.removeCustomLayer(Object object)

移除个性化图层。

Object object 参数

MapContext.addCustomLayer(Object object)

添加个性化图层。(暂只支持腾讯地图)

Object object 参数

MapContext.addGroundOverlay(Object object)

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

Object object 参数

Object.bounds 格式 | 属性 | 类型 | 说明 | | :--------------- | :------ | :----------------------- | | southwest | Object | 西南角经纬度, 格式{longitude, latitude} | | northeast | Object | 东北角经纬度, 格式{longitude, latitude} |

MapContext.updateGroundOverlay(Object object)

更新自定义图片图层。

Object object 参数

MapContext.removeGroundOverlay(Object object)

移除自定义图片图层。

Object object 参数

MapContext.toScreenLocation(Object object)

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

Object object 参数

Object.success(Object res) | 属性 | 类型 | 说明 | | :------------| :------ | :----------------------- | | x | Number | x 坐标值 | | y | Number | y 坐标值 |

MapContext.fromScreenLocation(Object object)

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

Object object 参数

Object.success(Object res) | 属性 | 类型 | 说明 | | :------------| :------ | :----------------------- | | longitude | Number | 经度 | | latitude | Number | 纬度 |

MapContext.openMapApp(Object object)

拉起地图APP选择导航。

Object object 参数

MapContext.addMarkers(Object object)

添加 marker。

Object object 参数

MapContext.removeMarkers(Object object)

移除 marker。

Object object 参数

MapContext.initMarkerCluster(Object object)

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

Object object 参数

MapContext.on(String event, Function callback)

监听地图事件。

参数

markerClusterCreate 事件回调参数 | 参数 | 类型 | 说明 | | :------- | :------- | :-------------- | | clusters | [ClusterInfo] | 聚合簇数据数组 |

markerClusterClick 事件回调参数 | 参数 | 类型 | 说明 | | :------- | :------- | :----------------------------------------------- | | cluster | ClusterInfo | 聚合簇数据 |

ClusterInfo 结构

示例代码：

const map = mc.createMapContext('mapId', this);
//获取中心点坐标
map.getCenterLocation({
    success: function(res){
        console.log(res.longitude, res.latitude);
    }
})

//获取视野范围
map.getRegion({
  success: function(res){
    console.log(res.southwest.longitude, res.southwest.latitude);
    console.log(res.northeast.longitude, res.northeast.latitude);
  }
})

//添加图片图层
map.addGroundOverlay({
  id: 1,
  src: '/assets/images/logo.png',
  bounds:{
    southwest: {longitude:116.380338, latitude: 39.92235},
    northeast: {longitude:116.414977, latitude: 39.947246}
  }
})

//添加点
var markers = [];
for (var i = 0; i < 10; i++) {
  this.data.markerId++;
  markers.push({
    id: this.data.markerId,
    clusterId: 'clusterId', 
    joinCluster: true,
    latitude: Math.random() * 30 + 21, 
    longitude: Math.random() * 40 + 85
  });
}
map.addMarkers({
  markers: markers,
  clear: false,//false 不清除已有点
  complete: this.setCallback
})

//聚合
map.initMarkerCluster({
  enableDefaultStyle: false,
  zoomOnClick: true,
  gridSize: 10,
  complete: this.setCallback
})
map.on('markerClusterCreate', function(res){
  //新增的聚合点
  console.log(res.clusters);
});
map.on('markerClusterClick', function(res){
  //点击的聚合点
  console.log(res.cluster);
});