《Vue企业开发实战》电子教案24-百度地图插件

《网站开发技术（VUE）》·教案24第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目9大觅项目中插件的使用授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目9的任务1。掌握百度地图JSAPI的引入与密钥使用，能在Vue3+Vite中集成本地地图显示。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1百度地图插件基本介绍；申请密钥；引入；业务逻辑与地图组件；上机—地图基本显示教材9.1三、学情分析学生已能做组件和计算属性，但第三方脚本、密钥、容器ref如何进Vite工程还不熟。本课要求地图能显示，并知道密钥不能写进公开仓库的规范。四、教学目标（一）知识目标1.了解百度地图在项目中的使用场景。2.掌握密钥申请与引入要点。3.理解地图容器、初始化与组件封装的基本步骤。（二）能力目标1.能按步骤引入并初始化地图。2.能把地图放到Vue组件中显示。3.能说明密钥使用注意事项。（三）素质目标1.遵守密钥与开源组件使用规范。2.不把密钥提交到公共仓库。3.规范操作。五、教学重点与难点类型内容突破办法重点引入与初始化对照官方步骤在组件mounted后创建难点Vite中脚本与容器尺寸容器要有高度；加载时机在挂载后六、教学方法与准备方法：规范先行、步骤演示、理实一体。导入用“演出场馆在哪、怎么看地图”。教师准备：课件；教材；已申请或教师提供的测试密钥；dm工程；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示场馆位置需求。提问：自己画地图不现实，用现成服务要注意什么？引出密钥规范。讨论哪些信息不能写进前端明文乱传。先立规矩再写代码。明确学习目标出示目标：组件里能出地图，知道密钥怎么管。对照目标勾画。用看得见的地图当达标。任务1讲解介绍适用场景。演示申请/配置密钥、在Vue组件中预留容器、挂载后初始化。强调ak使用规范与配额。记录步骤清单。步骤清单降低第三方接入焦虑。上机练习按教材完成百度地图基本显示。巡视：容器高度为0、初始化过早、密钥错误。独立显示出地图。项目9第一件插件落地。小结与作业回扣：第三方要封装成组件。预告跨组件共享用Pinia。保存地图组件。转向全局状态。课堂检测：①地图为什么要在挂载后再初始化？②密钥使用有哪些注意点？③容器没有高度会怎样？八、上机任务与评价练习任务要求合格标准常见问题上机1在Vue组件中显示百度地图页面出现地图，控制台无关键报错容器无高度、初始化时机错误、密钥无效过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述接入第三方地图的步骤。2.说明密钥为何不能随意提交到仓库。书面作业：列出地图组件的初始化步骤；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：____________________________________________