一、案例概述本次学习案例4.9 map组件主要练习微信小程序的地图组件以及位置相关接口。实现地图展示点位标记、选择位置、打开位置导航功能。作业扩展要求在原有两个标记点基础上新增第三个标记点页面一共展示三个地图标记。二、开发环境微信开发者工具新建不使用云服务、不使用模板的小程序项目。地图组件依赖腾讯地图在线底图开发设备需要保持网络连通。三、核心知识点map地图组件map是小程序内置地图组件可以设置地图中心点经纬度markers属性用来放置标记点。每一个标记点可以配置图标、大小还可以设置label标签在标记旁边显示文字、文字颜色以及标签背景色。三个位置APIwx.chooseLocation唤起系统地址选择页面用户可以搜索、选取地点选择完成后返回该地点的经纬度更新地图的中心位置。wx.getLocation获取设备当前地理位置必须使用gcj02坐标系适配腾讯地图。wx.openLocation调用微信内置地图页面可以实现查看位置、导航、打车等功能。小程序位置权限配置想要调用位置接口需要在app.json中进行两项配置。requiredPrivateInfos声明项目要使用的位置接口permission配置用户位置权限说明用户打开小程序时会弹出授权提示。本地图片资源项目根目录新建images文件夹存放地图标记图标。图标路径必须以根目录斜杠开头才能被map组件的marker识别。四、功能效果页面初始化紫色边框包裹地图区域上方展示标题“地图组件应用示例”。地图加载腾讯地图底图同时显示3个标记点位分别是我的位置、黑龙江东方学院南门、第一学生公寓每个标记附带彩色文字标签。点击“选择位置”按钮弹出地址选择界面可以搜索地点选定地点并点击完成后地图会自动移动到选中的位置。点击“打开位置”按钮小程序获取本机的地理位置唤起微信内置地图能够进行导航、打车等操作。五、开发中遇到的问题地图接口调用失败忘记配置app.json的权限信息位置相关接口直接报错补全权限配置后恢复正常。marker标记图标不显示图片文件夹放置位置错误图片放在pages文件夹内部或者图片路径书写错误map组件marker只支持从项目根目录开始的绝对路径。渲染器配置报错PPT案例使用skyline渲染器部分版本开发者工具存在兼容性问题会出现启动报错去掉skyline相关配置使用默认渲染器地图全部功能不受影响。地图页面空白腾讯地图底图需要联网加载网络异常会导致地图无法渲染检查网络环境重新编译即可。六、总结map组件是小程序开发中实现地图、点位展示、导航功能的基础组件。marker标记可以用来标注多个地点信息。通过三个位置API能够实现选点、获取定位、跳转导航地图。 本次作业在原有案例基础上新增第三个标记点加深了对markers数组配置的理解。同时掌握小程序位置权限的配置要点区分本地调试和上线发布的不同要求。地图类开发要注意坐标系统一腾讯地图使用gcj02坐标系。
