MapContext 实例,可通过 xhs.createMapContext 获取。MapContext 通过 id 跟一个 map 组件绑定,操作对应的 map 组件。
缩放视野展示所有经纬度(基础库v3.64.0及以上支持)
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
points | array | 要显示在可视区域内的坐标点列表 | |
padding | array | 坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为上,右,下,左,安卓上只能识别数组第一项,上下左右的padding一致。开发者工具暂不支持padding参数 | |
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
points
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
longitude | number | 经度 | |
latitude | number | 纬度 |
padding
number
获取当前地图中心的经纬度(基础库v3.64.0及以上支持)
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
iconPath | string | 图标路径,支持网络路径、本地路径、代码包路径 | |
success | function | ||
fail | function | ||
complete | function |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
longitude | number | 经度 | |
latitude | number | 纬度 |
平移marker,带动画(基础库v3.64.0及以上支持)
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
markerId | number | 指定 marker | |
destination | object | 指定 marker 移动到的目标点 | |
autoRotate | boolean | 移动过程中是否自动旋转 marker | |
rotate | number | marker 的旋转角度 | |
moveWithRotate | boolean | false | 平移和旋转同时进行 |
duration | number | 1000 | 动画持续时长,平移与旋转分别计算 |
animationEnd | function | 动画结束回调函数 | |
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
destination
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
longitude | number | 经度 | |
latitude | number | 纬度 |
将地图中心移置当前定位点,此时需设置地图组件 show-location 为true。'2.8.0' 起支持将地图中心移动到指定位置。(基础库v3.64.0及以上支持)
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
longitude | number | 经度 | |
latitude | number | 纬度 | |
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
获取当前地图的视野范围(基础库v3.64.0及以上支持)
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
southwest | object | 西南角经纬度 | |
northeast | object | 东北角经纬度 |
获取当前地图的缩放级别(基础库v3.64.0及以上支持)
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
scale | number | 缩放值 |
const mapContext = xhs.createMapContext('myMap'); mapContext.includePoints({ points: [ { longitude: 116.404, latitude: 39.915 }, { longitude: 117.200, latitude: 39.133 } ], padding: [10, 10, 10, 10], // 上、右、下、左的边距 success: () => { console.log('视野缩放成功'); }, fail: (err) => { console.error('视野缩放失败:', err.errMsg); } });
mapContext.getCenterLocation({ success: (res) => { console.log('地图中心点:', res.latitude, res.longitude); }, fail: (err) => { console.error('获取中心点失败:', err.errMsg); } });
mapContext.translateMarker({ markerId: 1, // 指定 marker 的 ID destination: { longitude: 116.404, latitude: 39.915 }, // 目标点 autoRotate: true, // 自动旋转 rotate: 45, // 旋转角度 moveWithRotate: true, // 平移和旋转同时进行 duration: 1000, // 动画持续时间 animationEnd: () => { console.log('动画结束'); }, success: () => { console.log('marker 平移成功'); }, fail: (err) => { console.error('marker 平移失败:', err.errMsg); } });
mapContext.moveToLocation({ longitude: 116.404, latitude: 39.915, success: () => { console.log('地图中心移动成功'); }, fail: (err) => { console.error('地图中心移动失败:', err.errMsg); } });
mapContext.getRegion({ success: (res) => { console.log('视野范围:', res); console.log('西南角:', res.southwest); console.log('东北角:', res.northeast); }, fail: (err) => { console.error('获取视野范围失败:', err.errMsg); } });
mapContext.getScale({ success: (res) => { console.log('当前缩放级别:', res.scale); }, fail: (err) => { console.error('获取缩放级别失败:', err.errMsg); } });
确保 mapId 与页面中 map 组件的 id 一致。 调用这些方法前,确保地图组件已渲染完成。 部分方法(如 includePoints 的 padding 参数)在开发者工具中可能不支持,需在真机上测试。