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 参数)在开发者工具中可能不支持,需在真机上测试。