本文共 1819 字，大约阅读时间需要 6 分钟。

微信小程序地图获取地点信息(打卡签到功能示例)

利用微信小程序的地图组件获取用户地理位置信息（经纬度），再通过腾讯地图 SDK 获取地名，结合签到功能实现地图打卡签到的解决方案。

效果图

地图已打马赛克

前提步骤

首先需要了解的

• 需要小程序负责人去申请，不要用自己账号)跟着教程把 key 申请下来。

• 需要在微信开放平台设置合法域名。

• 下载并放置 SDK 文件（如 qqmap-wx-jssdk.min.js）。

代码部分

配置性代码

app.js 部分关键代码

// 需要替换成你自己申请的 key
var QQMapWX = require('/utils/qqmap-wx-jssdk.min.js');
App({
  globalData: {
    patrolForm: null,
    qqmapsdk: new QQMapWX({
      key: '这个key是你申请下来的key'
    })
  }
})

{
  "pages": ["pages/location_check_in/location_check_in"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#3db0fc",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用于小程序签到功能"
    }
  }
}

功能性代码

页面代码：location_check_in.wxml

样式代码：location_check_in.wxss

/* location_check_in/location_check_in.wxss */
Page {
  background-color: #f2f2f2;
}
.wholeContainer {
  position: relative;
  height: 100vh;
}
.checkInPanel {
  position: absolute;
  width: 705rpx;
  height: 520rpx;
  bottom: 25rpx;
  left: 25rpx;
}

逻辑代码：location_check_in.js

const util = require('../../utils/util');
const app = getApp();
const qqmapsdk = app.globalData.qqmapsdk;
// 逆向地理解析函数
qqmapsdk.reverseGeocoder({
  success(res) {
    // 设置 地名
    this.setData({
      addressName: res.result.address
    });
    
    // 创建标记
    const mks = [];
    mks.push({
      title: res.result.address,
      id: 0,
      latitude: res.location.lat,
      longitude: res.location.lng,
      iconPath: '../../images/zcxj/myPosition.png'
    });
    
    this.setData({
      markers: mks,
      poi: {
        latitude: res.location.lat,
        longitude: res.location.lng
      }
    });
  },
  // 其他业务逻辑代码，供具体实现
});

开源代码下载

代码托管地址：Gitee