6.5教案-地图和位置.docx

6.5教案-地图和位置YOUR LOGO原 创 文 档 请 勿 盗 版第6章 小程序API任务6.5 地图和位置 课时内容地图和位置课时4教学目标掌握MAP组件和位置函数的用法；实现制作文件上传和文件下载功能的小程序。教学重难点掌握API函数wx.getLocation(Object object)接口的用法；掌握API函数wx.chooseLocation(Object object)接口的用法；掌握API函数wx.openLocation(Object object)接口的用法；实现选择位置和打开位置的功能。教学设计1.教学思路：利用map组件和相应的API函数实现选择位置和打开位置的功能。通过小程序实战巩固基础知识。2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一、任务描述设计一个地图和位置小程序，利用map组件和相应的API函数实现选择位置和打开位置的功能。 本节的学习目标：(1)掌握MAP组件和位置函数的用法；(2)实现制作文件上传和文件下载功能的小程序。以下来分别介绍文件上传和文件下载两种功能的程序编写。二、导入新知1. 地图和位置本任务使用了map地图组件和相应的位置API函数，分别是wx.getLocation(Object object)、wx.chooseLocation(Object object)和wx.openLocation(Object object)。地图中的颜色值color borderColor、bgColor等需使用6位（或8位）十六进制表示，8位时后两位表示alpha值，如：#00000AA。三、 实现效果根据任务描述，可以设计显示以初始给定的latitude和longitude的值为中心的地图，地图中有1个marker标记点图标，其中图标位置的标签是蓝色字体黄色底纹，字体大小为20px，如图6.14 (a)所示。 点击“选择位置”按钮后，出现地图，地图下方出现了很多地址名称，选择某个地址后，地图标记点会移动到该地址，当点击屏幕右上角的“确定”按钮后，界面返回到的初始界面，如图6.14 (b)所示。 当点击初始界面上的“打开位置”按钮后，地图的显示比例较大，并显示手机所在位置，如图6.14 (c)所示。 当点击右下角的绿色实心圆图标，当点击某个屏幕下方弹出的某个按钮时，小程序将执行相应的操作。 (a)标记点图标 (b) 选择位置 (c) 打开位置6.14 marker标记点图标四、任务实现（1）编写index.wxml文件代码。（2）编写index.wxss文件代码。该文件定义了2个样式：map和.btnLayout。index.wxss代码见附件；（3） 编写index.js文件代码。练习