★ FEATURED ARTICLE 在如今的移动端应用中基于地理位置的服务LBS非常普遍。无论是外卖、打车还是寻找附近的共享单车地图组件和定位能力都是不可或缺的。今天我将通过一个完整的小程序项目实战带大家从零开始梳理微信小程序中map组件的使用以及wx.getLocation、wx.chooseLocation和wx.openLocation这三大核心位置 API 的集成与配置并实现多标记点展示和位置导航功能。一、 环境准备与全局配置首先新建一个“不使用云服务、不使用模板”的基础小程序项目。位置相关的 API 涉及用户隐私因此需要在全局配置文件app.json中进行声明。1. 配置app.json在app.json中我们需要声明requiredPrivateInfos声明要调用的接口以及permission声明权限用途。json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, requiredPrivateInfos: [ getLocation, chooseLocation ], permission: { scope.userLocation: { desc: 您的位置信息将用于小程序位置接口的效果展示 } } }注如果是开发调试配置到这里就可以运行了。但如果后续需要发布上线必须在小程序管理后台的「开发管理」-「接口设置」中根据你的小程序类目如医疗服务、电商平台等自助申请开通wx.getLocation等接口的权限。2. 准备图标资源在根目录下新建images文件夹放入两个标记图标用于后续在地图上区分不同的位置点。二、 页面结构 (WXML) 与 样式 (WXSS)我们需要一个全屏的地图以及底部的操作按钮。使用 flex 布局可以轻松实现这种结构。1. 编写index.wxml这里除了基础的map组件外我们预留了用于显示位置的标题并放置了“选择位置”和“打开位置”两个按钮。htmlview classscrollarea map idmyMap longitude{{longitude}} latitude{{latitude}} scale16 markers{{markers}} show-locationtrue stylewidth: 100%; height: 100%; /map /view view classbtnLayout button typeprimary bindtapchooseLocation选择位置/button button typeprimary bindtapopenLocation打开位置/button /view2. 编写index.wxss通过 Flex 布局让地图占满剩余空间。csspage { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } /* 底部按钮布局 */ .btnLayout { display: flex; flex-direction: row; justify-content: space-evenly; padding: 20rpx; background-color: #fff; }三、 核心逻辑实现 (JS)在index.js中我们定义了初始的经纬度以黑龙江东方学院为例并初始化两个标记点Markers。1. 数据初始化与多标记点配置javascriptPage({ data: { // 初始中心点经纬度 latitude: 45.692383, longitude: 126.638438, // 地图标记点数组 markers: [ { id: 1, latitude: 45.692383, longitude: 126.638438, width: 40, height: 40, iconPath: /images/location.png, // 你的图标路径 callout: { content: 我的位置, color: #333, fontSize: 14, borderRadius: 5, padding: 5, display: ALWAYS } }, { id: 2, latitude: 45.695000, longitude: 126.640000, width: 40, height: 40, iconPath: /images/marker.png, callout: { content: 第一学生公寓, color: #FF0000, fontSize: 14, borderRadius: 5, padding: 5, display: ALWAYS } } ] }, // ... 其他方法 })2. 选择位置wx.chooseLocation点击“选择位置”后会打开微信内置的地图选点界面。javascriptchooseLocation() { wx.chooseLocation({ success: (res) { console.log(选择的位置, res); // 将地图中心点更新为用户选择的位置 this.setData({ longitude: res.longitude, latitude: res.latitude }); }, fail: (err) { console.error(选择位置失败, err); } }); }3. 获取并打开位置wx.getLocation wx.openLocation点击“打开位置”时我们先获取用户当前的准确位置然后调用微信内置地图进行查看用户可以直接在内置地图中点击“导航”。javascriptopenLocation() { wx.getLocation({ type: gcj02, // 返回可以用于wx.openLocation的经纬度 success: (res) { const { latitude, longitude } res; wx.openLocation({ latitude, longitude, scale: 18, name: 我的当前位置, address: 这里可以填写详细地址 }); }, fail: (err) { console.error(获取位置失败, err); wx.showToast({ title: 获取位置失败请检查权限, icon: none }) } }); }四、 进阶优化地图信息的可视化展示在实际业务中如果只靠地图上的小图标用户很难直观看出具体是哪个建筑。我们可以结合cover-view或者利用markers中的callout属性来做醒目的文字标注。如上文 JS 代码所示我们在markers中配置了callout。这样在地图上就会直接浮出类似“我的位置”、“第一学生公寓”这样的气泡文字。如果结合label属性还能实现不同背景色的文字标签让地图信息更加丰富且具有设计感。效果预览当小程序运行起来后你会看到默认加载出以初始经纬度为中心的地图上面有两个标记点带文字气泡。点击“选择位置”弹出全屏选点地图选完后当前地图中心点会平移过去。点击“打开位置”自动识别当前 GPS 位置并拉起微信内置地图此时可以点击底部的“导航”或“打车”按钮直接跳转到第三方应用。五、 踩坑与注意事项坐标系问题小程序的wx.getLocation支持wgs84和gcj02。由于国内的腾讯地图、高德地图均采用 GCJ-02火星坐标系如果是用于地图展示或导航一定要传type: gcj02。权限被拒用户如果第一次拒绝了位置权限后续需要引导用户去小程序的“右上角胶囊 - 设置”中重新开启。可以使用wx.getSetting和wx.openSetting来处理这种场景。真机调试部分位置 API 在微信开发者工具的模拟器上可能会有偏差或无法获取真实坐标建议务必使用真机预览进行测试。通过这个实战案例基本涵盖了微信小程序地图开发的核心知识点。你可以在此基础上结合后端接口实现打卡签到、附近门店展示、路线规划等更复杂的业务逻辑。希望这篇分享对大家在开发小程序地图功能时有所帮助
阅读完成 · 觉得有帮助？
