微信小程序案例 《4.9 map 地图组件》

案例需求

1. 页面展示 map 地图组件，初始展示 2 个 marker 标记点，标记附带 label 文字标签。
2. 【选择位置】按钮：调用wx.chooseLocation，打开选点地图，选定地址后更新地图中心点经纬度。
3. 【打开位置】按钮：调用wx.getLocation获取当前设备定位，再调用wx.openLocation唤起微信地图，支持导航、打车。
4. app.json 配置位置接口声明requiredPrivateInfos以及位置授权提示permission。
5. ✨作业扩展：新增第 3 个 marker 标记点，页面一共显示 3 个标记。

完整代码

1.app.json（权限配置，webview 渲染引擎）

2.pages/index/index.wxml

3.pages/index/index.wxss

4.pages/index/index.js（包含作业扩展第三个标记点）

5.app.wxss 全局样式

核心知识点

1.map 组件基础属性

表格

属性	说明
longitude	地图中心经度
latitude	地图中心纬度
markers	标记点数组，存放多个标记对象
show‑location="true"	展示用户当前定位小圆点

2.marker 标记对象字段

• id：标记唯一编号，数字类型
• longitude / latitude：标记点的经纬度
• iconPath：自定义标记图标本地路径，根目录路径开头必须带/
• width、height：标记图标宽高，单位 px
• label：标记上方文字标签对象
  • content：显示文字
  • color：文字颜色
  • bgColor：标签背景颜色
  • fontSize：文字字号

3. 三个位置 API 讲解

1. wx.chooseLocation() 打开微信选地点页面，可以搜索地点、选点；成功回调返回经纬度、地址名称。
2. wx.getLocation({type:'gcj02'}) 获取设备当前地理位置；type 必须为 gcj02，微信地图火星坐标系，不要使用 wgs84。
3. wx.openLocation() 唤起微信原生地图界面，提供导航、打车、收藏功能。

4.app.json 权限配置

1. requiredPrivateInfos数组填写调用的位置接口名称，不配置接口直接报错；
2. permission配置位置授权弹窗提示文案。

踩坑实录

坑 1：位置接口调用直接报错

1. app.json 没有填写requiredPrivateInfos，未声明接口；
2. 缺少permission位置权限配置；
3. 模拟器不能完整模拟位置接口，必须真机测试完整功能。

坑 2：marker 自定义图标加载失败，控制台报 404

1. images 文件夹必须放在项目根目录，与 pages 同级；
2. iconPath路径开头/不能省略；
3. 文件名大小写错误，真机对大小写敏感；

坑 3：打开位置，定位位置错乱

wx.getLocation的type参数必须设置为gcj02，微信地图使用火星坐标系。

坑 4：选择位置完成，地图中心点不更新

chooseLocation的 success 回调，使用this.setData更新 longitude、latitude，map 组件才会刷新地图中心。

坑 5：skyline 渲染引擎报配置错误

本案例改用renderer:"webview"，规避 skyline 各类兼容报错，和前面案例保持统一。

坑 6：复制代码出现 unexpected character

复制 PPT 代码带入中文全角横线符号，全部替换为英文半角-。

拓展思考题

1. 将chooseLocation返回的地址名称res.name展示在页面；
2. 实现 marker 点击事件，点击标记弹窗提示地点信息；
3. 添加按钮，调用wx.getLocation直接把地图中心移动到自己当前的位置。