「微信小程序」实获取当前位置并在地图上显示案例.docx

「微信小程序」实现获取当前位置并在地图上显示案例环境搭建安装就不说了,一路next就好,只是在!安装完成之后,打开工具,用微信扫一扫进行微信验证后就可以看到如下界面啦!?点击添加项目,按照要求填写APPID和项目名称和存储路径,填写好后,点击确定,开发工具就会自动生成项目基本的结构!?项目结构文件结构很简单?-?pages文件夹里面放所有页面的内容,在小程序的开发中,是将每个页面的内容(包括布局页面.wxml,样式文件.wxss,配置文件json文件)单独的放在统一的文件夹内!?-?utils文件夹里面存放通用的js文件,J2ee的小伙伴应该对它很熟悉!?-?app.js文件,也是项目的入口文件,在这里小程序会开始他的生命周期!?-?app.json文件是配置项目的加载文件和相关组件,项目在加载的时候首先会在这个文件里面查找它所要加载的组件,因此,它至关重要!?-?app.wxss文件,存放所有通用的样式文件!小提醒:1,想必你也已经看出来了,wxml其实就是我们熟的不能载熟的html文件,wxss就是css文件!2,app.json文件中的配置项中,不能写注释(没搞清楚为什么会这样!)!3,app.json中windows选项(也就是页面的头部信息)配置好后,所有页面都会显示这个名称,更改的方法是在需要更改头部信息的页面添加.json文件,重命名navigationBarTitleText的值地图定位实例好了,说了这么多口都干了,还是不啰嗦了,直接上咱们的小demo吧!配置app.json文件所要加载的页面//app.json{pages:[pages/index/index ],window:{backgroundTextStyle:light,navigationBarBackgroundColor: #10DDC2,navigationBarTitleText: Appjs全局名称,navigationBarTextStyle:white }}需要注意的是:* pages配置路径的时候,不要写注释!* navigationBarTitleText: Appjs全局名称,是定义的全局名称,局部页面更高的方法在上面我已经提到过了! (什么?没看见?诺!就是在具体要更改的界面增加json文件,重定义navigationBarTitleText的值啦)!* navigationBarBackgroundColor: #10DDC2,指头部背景颜色,可自行更改!配置好加载的页面和基本的头部信息后,我们打开pages/index/index.wxml文件,来搭建界面的基本布局!!--index.wxml--viewclass=wrapperviewclass=bodyviewclass=body-wrapperformbindsubmit=openLocationviewclass=body-formtextclass=body-form-key经度/textinputclass=body-form-valuetype=textvalue={{location.longitude}}name=longitude/inputtextclass=body-form-key纬度/textinputclass=body-form-valuetype=textvalue={{location.latitude}}name=latitude/inputtextclass=body-form-key位置名称/textinputclass=body-form-valuetype=textvalue=总部基地二区name=name/inputtextclass=body-form-key详细位置/textinputclass=body-form-valuetype=textvalue=浙江大学滨海产业技术研究院name=address/input/viewviewclass=body-buttonsbuttonclass=body-buttontype=primarybindtap=getLocation获取位置/buttonbuttonclass=body-buttontype=primaryformType=submit查看位置/button/view/form/view/view/view然后再根据我们的需要,在index.wxss文件里面写入基本的样式/**index.wxss**/.wrapper{height:100%;background:#fff;}.body-form-value{font-size:14px;color:darkturquoise;font-weight: bold;padding-left:15px;bo