小程序开放平台

文档中心
基础
路由
跳转
转发
界面
网络
支付
数据缓存
媒体
图片
地图
createMapContext
MapContext
视频
富文本
位置
开放接口
设备
XHSML
性能
第三方平台
文件
数据分析
画布

xhs.MapContext

开发
>
JS API
>
媒体
>
地图
>
MapContext
>
更新时间:2025-04-10 16:15:22

MapContext 实例,可通过 xhs.createMapContext 获取。MapContext 通过 id 跟一个 map 组件绑定,操作对应的 map 组件。

方法

MapContext.includePoints

缩放视野展示所有经纬度(基础库v3.64.0及以上支持)

参数

属性
类型
默认值
说明
pointsarray要显示在可视区域内的坐标点列表
paddingarray坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为上,右,下,左,安卓上只能识别数组第一项,上下左右的padding一致。开发者工具暂不支持padding参数
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

points

属性
类型
默认值
说明
longitudenumber经度
latitudenumber纬度

padding

number

MapContext.getCenterLocation

获取当前地图中心的经纬度(基础库v3.64.0及以上支持)

参数

属性
类型
默认值
说明
iconPathstring图标路径,支持网络路径、本地路径、代码包路径
successfunction
failfunction
completefunction

object.success

属性
类型
默认值
说明
longitudenumber经度
latitudenumber纬度

MapContext.translateMarker

平移marker,带动画(基础库v3.64.0及以上支持)

参数

属性
类型
默认值
说明
markerIdnumber指定 marker
destinationobject指定 marker 移动到的目标点
autoRotateboolean移动过程中是否自动旋转 marker
rotatenumbermarker 的旋转角度
moveWithRotatebooleanfalse平移和旋转同时进行
durationnumber1000动画持续时长,平移与旋转分别计算
animationEndfunction动画结束回调函数
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

destination

属性
类型
默认值
说明
longitudenumber经度
latitudenumber纬度

MapContext.moveToLocation

将地图中心移置当前定位点,此时需设置地图组件 show-location 为true。'2.8.0' 起支持将地图中心移动到指定位置。(基础库v3.64.0及以上支持)

参数

属性
类型
默认值
说明
longitudenumber经度
latitudenumber纬度
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

MapContext.getRegion

获取当前地图的视野范围(基础库v3.64.0及以上支持)

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success

属性
类型
默认值
说明
southwestobject西南角经纬度
northeastobject东北角经纬度

MapContext.getScale

获取当前地图的缩放级别(基础库v3.64.0及以上支持)

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success

属性
类型
默认值
说明
scalenumber缩放值

实例代码

1. includePoints:缩放视野展示所有经纬度

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);
  }
});

2. getCenterLocation:获取当前地图中心的经纬度

mapContext.getCenterLocation({
  success: (res) => {
    console.log('地图中心点:', res.latitude, res.longitude);
  },
  fail: (err) => {
    console.error('获取中心点失败:', err.errMsg);
  }
});

3. translateMarker:平移 marker,带动画

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);
  }
});

4. moveToLocation:将地图中心移置当前定位点

mapContext.moveToLocation({
  longitude: 116.404,
  latitude: 39.915,
  success: () => {
    console.log('地图中心移动成功');
  },
  fail: (err) => {
    console.error('地图中心移动失败:', err.errMsg);
  }
});

5. getRegion:获取当前地图的视野范围

mapContext.getRegion({
  success: (res) => {
    console.log('视野范围:', res);
    console.log('西南角:', res.southwest);
    console.log('东北角:', res.northeast);
  },
  fail: (err) => {
    console.error('获取视野范围失败:', err.errMsg);
  }
});

6. getScale:获取当前地图的缩放级别

mapContext.getScale({
  success: (res) => {
    console.log('当前缩放级别:', res.scale);
  },
  fail: (err) => {
    console.error('获取缩放级别失败:', err.errMsg);
  }
});

注意事项

确保 mapId 与页面中 map 组件的 id 一致。 调用这些方法前,确保地图组件已渲染完成。 部分方法(如 includePoints 的 padding 参数)在开发者工具中可能不支持,需在真机上测试。