B2C电商
B2B交易系统
智慧门店
分销商城
社区电商
查看更多

2023年微信小程序API 地图·MapContext对象
作者: --时间: 2025-06-28 03:12:04 阅读量:
通过使用微信小程序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电商交易系统

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

    演示后台
  • 企业集采商城系统

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

    模式介绍
  • 员工福利商城系统

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

    马上试用