2023年微信小程序API 地图·MapContext对象
作者: --时间: 2025-06-09 08:11:11 阅读量:
通过使用微信小程序API地图·MapContext对象,企业可以在自己的小程序中引入各种有用的地图功能。以下是MapContext提供的最重要的方法:

1. 获取当前地图的中心位置

使用getCenterLocation()方法可以获取当前地图中心点的经纬度坐标。这个坐标可以直接在小程序中打开使用wx.openLocation()。

2. 将地图中心移置定位点

利用moveToLocation(Object object)方法,将地图中心移至当前用户所在的位置。设置组件show-location为true即可实现该功能。从小程序2.8.0开始,这个函数也支持将地图中心移动到指定的位置。

3. 平移Marker

利用translateMarker(Object object)方法,可以平移标记,并带有动画效果。

4. 缩放显示所有的经纬度数据

includePoints(Object object)方法来缩放以展示所有经纬度信息。

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

getRegion()方法用于获取当下地图的视野范围。

6. 获取当前地图旋转角度

getRotate()方法用于获取当前地图的旋转角度。

7. 获取当前地图倾斜角度

getSkew()方法用于获取当前地图的倾斜角度。

8. 获取当前地图缩放级别

getScale()方法用于获取当前地图的缩放级别。

9. 设置地图中心点偏移量

setCenterOffset(Object object)方法可以设置地图中心点的偏移量,按照向后和向下的方向来增大。默认情况下,坐标[0.5, 0.5]表示屏幕的中央位置,可接受范围为(0.25~0.75)。

10. 移除自定义图层

removeCustomLayer(Object object)方法用于在小程序地图中删除自定义图层。

11. 添加自定义图层

addCustomLayer(Object object)方法用于在小程序地图中添加自定义图层。

示例代码如下:
<!-- 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>
// 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:
  • B2B2C多用户商城系统
    支持企业自营与商户入驻模式共存 会员一站式精细化营销工具 多用户分销,带来爆发式增长

    系统支持平台自营+供应商店铺共存的经营模式(类天猫&京东模式),帮助企业打造生态级商业平台为目的的电子商务系统。

    免费试用系统
  • B2B2B电商交易系统
    优化供应链协作 授信及账期支付 商品按照数量阶梯设价

    全渠道订货/采购及经销商管理数字化系统,实现供应链整合和交易便捷化。

    免费试用系统
  • S2B2B电商交易系统
    供销一体化,提高市场集中度 集团管控一体化,有效实现供需匹配 移动应用一体化,提高运营综合效率

    上下游资源整合数字化解决方案,赋能产业供应链,构建产业互联网生态体系。

    免费试用系统
一套系统全搞定
  • 商家管理
  • 商品管理
  • 订单管理
  • 会员管理
  • 营销中心
  • 供应链入驻
  • 财务管理
  • 支付分账
  • 商城直播
免费试用
更多产品任你选
B2B2C多用户商城系统

类天猫&京东模式系统

了解更多
B2B2B电商交易系统

全渠道订货/采购及经销商管
理数字化系统

了解更多
S2B2B电商交易系统

上下游资源整合数字化解决方

了解更多
企业集采商城系统

中大型企业数字化采购与交易
系统

了解更多
员工福利商城系统

集福利管理、发放于一体的员
工福利商城

了解更多