在本地生活、出行服务或同城配送类的小程序中地图功能几乎是标配。如何优雅地展示位置、让用户选择地址并一键调起导航本文将拆解微信小程序中与地图相关的三大核心 APImap组件、wx.chooseLocation以及wx.openLocation。一、 基础环境配置权限先行在真正编写代码之前必须要先处理位置权限。现代移动端系统对隐私保护极其严格如果没有正确配置调用任何位置接口都会直接报错失败。我们需要在app.json中声明两项关键配置json{ requiredPrivateInfos: [ getLocation, chooseLocation ], permission: { scope.userLocation: { desc: 您的位置信息将用于展示附近的服务门店 } } }requiredPrivateInfos告诉微信底层这个小程序将要使用哪些敏感的地理位置接口。permission用于在弹窗中向用户展示获取位置的合理理由desc字段。二、 地图展示与多标记点Markers小程序的map组件非常强大。我们可以通过传入经纬度来锁定中心点并通过markers数组在地图上绘制多个标记。假设我们需要在地图上同时标记“中心广场”、“写字楼 A 座”和“地铁口”三个点html !-- index.wxml -- map idmyMap classmap longitude{{longitude}} latitude{{latitude}} scale16 markers{{markers}} show-location /map在逻辑层JS中我们通过配置markers数组来实现。为了让标记点更直观可以使用callout属性添加气泡提示javascript Page({ data: { latitude: 39.9042, // 假设的初始中心点纬度 longitude: 116.4074, // 假设的初始中心点经度 markers: [ { id: 1, latitude: 39.9042, longitude: 116.4074, callout: { content: 中心广场, color: #ff0000, display: ALWAYS } }, { id: 2, latitude: 39.9060, longitude: 116.4100, callout: { content: 写字楼A座, color: #0000ff, display: ALWAYS } }, { id: 3, latitude: 39.9010, longitude: 116.4020, callout: { content: 地铁口, color: #00ff00, display: ALWAYS } } ] } })三、 交互体验让用户选择位置有时候我们需要获取用户指定的位置而不是他们当前所在的位置。这时候wx.chooseLocation就派上用场了。它会拉起微信原生的选点页面用户可以直接搜索或在地图上拖动选择。javascript chooseLocation() { wx.chooseLocation({ success: (res) { console.log(用户选中的地址, res); // res 包含 name (地址名), address (详细地址), latitude, longitude // 将地图中心点移动到用户选择的位置 this.setData({ longitude: res.longitude, latitude: res.latitude }); } }); }四、 出行闭环调起原生导航当我们在列表中展示了一个商家的位置用户想要去那里时wx.openLocation就是最佳选择。注意一个实战坑点wx.openLocation依赖用户的当前真实位置来计算距离和路线。所以通常我们需要先调用wx.getLocation再把当前位置和目标位置一起传给openLocation。javascript openLocation() { // 获取当前真实位置 wx.getLocation({ type: gcj02, // 必须使用 gcj02 坐标系 success: (res) { // 调起原生地图 wx.openLocation({ latitude: res.latitude, longitude: res.longitude, name: 我的当前位置, scale: 18 }); }, fail: (err) { console.error(获取当前位置失败, err); wx.showToast({ title: 请检查定位权限, icon: none }); } }); }常见问题与避坑指南关于qqmap://报错如果在电脑端的开发者工具中点击原生地图底部的“导航”或“打车”控制台会报ERR_UNKNOWN_URL_SCHEME或qqmap://错误。这是因为电脑端无法直接呼出手机端的 App 导航协议。只要部署到真机上即可正常跳转到高德、百度或腾讯地图。授权被拒后的处理如果用户之前不小心点击了“拒绝”授权再次调用会直接失败。为了体验更好可以加入wx.getSetting判断若被拒则通过wx.showModal引导用户前往wx.openSetting重新开启。
