微信小程序实战：Map 组件与位置 API 详解

前言在微信小程序开发中地图功能如打车、外卖、导航等是非常常见的业务场景。微信官方提供了组件以及一系列位置相关的 API。今天我们将通过一个实战案例案例 4.9 map 组件实现一个包含地图展示、选择位置、打开位置功能的小程序并在基础要求上完成“在地图上添加 3 个自定义标记点Markers”的扩展作业。一、 核心知识点准备在开始编码前我们需要了解本次用到的核心 API 和配置组件小程序原生地图组件支持标记点markers、气泡callout等属性。wx.getLocation获取当前的地理位置、速度。wx.chooseLocation打开地图选择位置。wx.openLocation使用微信内置地图查看位置。权限配置自 2022 年起微信对地理位置接口进行了严格管控必须在 app.json 中声明 requiredPrivateInfos 和 permission。二、 项目配置准备图标在项目根目录下新建 images 文件夹放入三个图标图片如 location.png、marker1.png、marker2.png用于地图上的标记点。修改 app.json非常重要如果不配置这里调用 wx.getLocation 会直接报错。将以下配置加入你的 app.json 中json{“pages”: [“pages/index/index”],“window”: {“navigationBarTitleText”: “map组件”,“navigationStyle”: “custom”},“requiredPrivateInfos”: [“getLocation”,“chooseLocation”],“permission”: {“scope.userLocation”: {“desc”: “你的位置信息将用于小程序位置接口的效果展示”}},“style”: “v2”,“renderer”: “skyline”,“componentFramework”: “glass-easel”}(注若要正式发布上线还需要在微信公众平台后台的“开发管理-接口设置”中申请开通地理位置的接口权限且小程序类目需符合要求。)三、 页面布局与样式index.wxml布局非常直观上方是标题和地图组件下方是两个操作按钮。html地图组件应用示例mapid“myMap”class“map”longitude“{{longitude}}”latitude“{{latitude}}”scale“16”markers“{{markers}}”show-location选择位置 打开位置 2. index.wxss 根据 PPT 中的布局要求设置页面为 Flex 纵向布局并固定地图的高度。csspage {height: 100vh;display: flex;flex-direction: column;}map {margin: 20rpx 0;width: 100%;height: 700rpx;}.btnLayout {display: flex;flex-direction: row;justify-content: space-evenly;padding: 20rpx;}3. app.wxss (全局样式)css.box {margin: 20rpx;padding: 20rpx;border: 2rpx solid purple;}.title {font-size: 40rpx;font-weight: bolder;text-align: center;margin-bottom: 30rpx;color: #ff7d00;}四、 逻辑实现含扩展作业初始化 3 个标记点扩展作业打开 index.js我们在 onLoad 中初始化数据。为了完成扩展要求我们在 markers 数组中配置了 3 个对象并利用 callout 属性为它们添加了类似 PPT 中的文字气泡。javascriptPage({data: {// 初始经纬度以黑龙江东方学院附近为例latitude: 45.7033,longitude: 126.6383,markers: []},onLoad() {// 扩展作业初始化 3 个标记点this.setData({markers: [{id: 1,latitude: 45.7033,longitude: 126.6383,iconPath: ‘/images/location.png’,width: 40,height: 40,callout: {content: ‘我的位置’,color: ‘#000000’,fontSize: 14,borderRadius: 5,bgColor: ‘#ffffff’,padding: 5,display: ‘ALWAYS’, // 常驻显示气泡textAlign: ‘center’}},{id: 2,latitude: 45.7060, // 模拟坐标longitude: 126.6410,iconPath: ‘/images/marker1.png’,width: 35,height: 35,callout: {content: ‘第一学生公寓’,color: ‘#ffffff’,fontSize: 14,borderRadius: 5,bgColor: ‘#0052d9’, // 蓝色背景padding: 5,display: ‘ALWAYS’,textAlign: ‘center’}},{id: 3,latitude: 45.7000, // 模拟坐标longitude: 126.6360,iconPath: ‘/images/marker2.png’,width: 35,height: 35,callout: {content: ‘黑龙江东方学院南门’,color: ‘#ffffff’,fontSize: 14,borderRadius: 5,bgColor: ‘#ff0055’, // 红色背景padding: 5,display: ‘ALWAYS’,textAlign: ‘center’}}]});},// … 其他方法})2. 选择位置 打开位置继续在 index.js 中完善两个按钮的点击事件javascript// 选择位置chooseLocation() {wx.chooseLocation({success: (res) {console.log(res);// 将地图中心点移动到用户选择的位置this.setData({longitude: res.longitude,latitude: res.latitude});wx.showToast({ title: 已选择 res.name, icon: none }); }, fail: (err) { console.error(选择位置失败, err); } });},// 打开位置openLocation() {wx.getLocation({// 【踩坑提示】PPT 中写的 type: ‘gci02’ 是错的正确的坐标系是 ‘gcj02’type: ‘gcj02’,success: (res) {wx.openLocation({latitude: res.latitude,longitude: res.longitude,name: ‘我的当前位置’,address: ‘通过 wx.getLocation 获取’,scale: 18});},fail: (err) {console.error(“获取位置失败”, err);wx.showToast({title: ‘获取位置失败请检查手机定位权限’,icon: ‘none’});}});}五、 避坑指南与总结坐标系错误坑案例 PPT 第 16 页的代码截图中wx.getLocation 的 type 属性被写成了 ‘gci02’这会导致接口调用失败。正确的微信小程序标准坐标系应该是 ‘gcj02’。真机调试权限在微信开发者工具中调用 wx.getLocation 时可能需要在右上角“详情”-“本地设置”中勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”。如果在真机上测试务必确保手机开启了微信的定位权限。Marker 气泡布局callout 属性非常实用。设置 display: ‘ALWAYS’ 可以让气泡常驻显示配合 bgColor、padding 和 borderRadius可以完美还原 PPT 作业中要求的多种颜色标签样式。结语通过这个案例我们不仅掌握了小程序组件的使用还打通了 getLocation、chooseLocation 和 openLocation 三大地理 API 的联动逻辑。同时通过扩展 3 个标记点的练习熟悉了 markers 数组的数据绑定方式为后续开发 LBS基于位置的服务类应用打下了坚实基础。