前言最近在做微信小程序课程作业学习map地图组件的使用。需求是在地图上放置多个 marker 标记点同时实现选择位置、打开地图导航功能。踩了app.json框架配置的坑在这里记录完整实现过程与可直接运行的源码方便后续复习。功能预览页面加载地图初始化展示3个自定义标记点每个标记带有文字标签【选择位置】按钮调用wx.chooseLocation唤起选点地图选中后修改地图中心点【打开位置】按钮调用wx.getLocation获取当前定位再用wx.openLocation打开微信内置地图支持导航适配旧版开发者工具修复glass-easel框架报错问题。项目目录结构完整代码1. app.json2. app.wxss 全局样式/**app.wxss**/ .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. pages/index/index.wxml 页面结构!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox view classtitle地图组件应用示例/view map idmy-map longitude{{longitude}} latitude{{latitude}} markers{{markers}} show-locationtrue/map view classbtnLayout button typeprimary sizemini bind:tapchooseLocation选择位置/button button typeprimary sizemini bind:tapopenLocation打开位置/button /view /view /scroll-viewlongitude/latitude地图中心点经纬度markers标记点数组show-locationtrue显示当前用户定位圆点bind:tap绑定点击事件。4. pages/index/index.wxss 页面样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } map { margin: 20rpx 0; width: 100%; height: 700rpx; } .btnLayout { display: flex; flex-direction: row; justify-content: space-evenly; }5. pages/index/index.js 业务逻辑已修改为第四学生公寓// index.js Page({ data: { longitude: 126.667050, latitude: 45.573060, markers: [ { id: 1, longitude: 126.660821, latitude: 45.572903, iconPath: /images/loc01.png, width: 28, height: 28, label: { content: 我的位置, color: #0000ff, bgColor: #ffff00, fontSize: 20 } }, { id: 2, longitude: 126.659702, latitude: 45.57112, iconPath: /images/loc02.png, width: 32, height: 32, label: { content: 黑龙江东方学院南门, color: #ffff00, bgColor: #ff00ff, fontSize: 20 } }, { id: 3, longitude: 126.667050, latitude: 45.573060, iconPath: /images/loc01.png, width: 30, height: 30, label: { content: 第四学生公寓, color: #ffffff, bgColor: #0000ff, fontSize: 20 } } ] }, // 选择位置 chooseLocation() { wx.chooseLocation({ success: (res) { console.log(res); this.setData({ longitude: res.longitude, latitude: res.latitude }) } }) }, // 获取定位并打开内置地图 openLocation() { wx.getLocation({ type: gcj02, success: (res) { wx.openLocation({ latitude: res.latitude, longitude: res.longitude }) } }) } })6. pages/index/index.json{ usingComponents: {} }关键知识点总结marker 参数id标记唯一编号iconPath自定义图标路径label是标记上方文字坐标系小程序地图默认使用gcj02国测局坐标系高德、腾讯地图都是这个坐标系权限说明开发阶段在开发者工具勾选位置模拟即可调试上线发布需要在小程序后台申请这两个接口权限拓展方向可以给 marker 添加点击事件、添加路线规划、弹窗详情等功能。小结这次作业熟悉了小程序地图组件和位置相关API最容易踩坑的就是app.json的配置和位置权限声明。这份代码可以直接导入微信开发者工具运行标记点坐标可以根据需求自行修改。