「微信小程序」实现获取当前位置并在地图上显示
2016-09-28 14:05
866 查看
盆友圈最近真是被微信小程序这货刷爆了,哪那都是它,作为一个喜欢尝(作)鲜(死)的前端汪来说,我肯定不会轻易放弃这么好的尝试机会,嘛溜的,先搭好环境压压惊!
尽管如此,小编我还是找到了工具,没时间解释太多,上车走人!这里小编提供一份优化(你懂得)的工具,有兴趣的可以上车试试喔! 微信开发者工具下载 领取密码:4xr9
安装就不说了,一路next就好,只是在!安装完成之后,打开工具,用微信扫一扫进行微信验证后就可以看到如下界面啦!
点击添加项目,按照要求填写APPID和项目名称和存储路径,填写好后,点击确定,开发工具就会自动生成项目基本的结构!
- pages文件夹里面放所有页面的内容,在小程序的开发中,是将每个页面的内容(包括布局页面.wxml,样式文件.wxss,配置文件json文件)单独的放在统一的文件夹内!
- utils文件夹里面存放通用的js文件,J2ee的小伙伴应该对它很熟悉!
- app.js文件,也是项目的入口文件,在这里小程序会开始他的生命周期!
- app.json文件是配置项目的加载文件和相关组件,项目在加载的时候首先会在这个文件里面查找它所要加载的组件,因此,它至关重要!
- app.wxss文件,存放所有通用的样式文件!
配置app.json文件所要加载的页面
配置好加载的页面和基本的头部信息后,我们打开pages/index/index.wxml文件,来搭建界面的基本布局!
然后再根据我们的需要,在index.wxss文件里面写入基本的样式
界面搭建完成,在index.wxml界面中,经纬度的获取我们采用双向绑定的机制从js中动态夺取(是不是想到了angularjs和vuejs呢),这又涉及到小程序的加载机制的问题,我将在后面的文章具体阐述,现在我们先忽略这些,本次重在走一遍流程实现效果为主!
打了这么久,还是先看看效果,点击左侧的调试按钮,刷新看到如下效果!
在index.wxml中,我们给表单中的经度和纬度输入框双向绑定经纬度的指,并给第一个按钮绑定了获取经纬度值的事件,当点击获取位置的按钮,就可以通过微信提供的接口获取我们想要的值,同时,我们也可以自己输入经纬度进行查询位置.
因此,接下来我们写获取地理位置的方法,打开index.js,输入以下代码:
在index.js中我首先定义了页面加载的时候hasLocation:false,也就是默认不加载地理位置,当点击获取地理位置的时候,通过getLocation方法获取到当前的经纬度位置,并将他以对象的形式返回回去,这样,在前端界面的input输入框中,通过{{location.longitude}}和{{location.latitude}}就可以动态获取到经纬度的值!
在调试中,我们点击获取地址按钮,得到我们想要的结果
得到地理位置后,我们就可以将这些数据发送给微信的打开地图的接口,以此来在地图中展示位置信息,给form表单绑定openLocation事件,这样当点击查看位置按钮,就可以将地理位置信息发送给openLocation事件,通过这个接口在地图中打开位置!
自此,我们的demo也就完成啦!
2.在调试页面的时候,如果是更改了js或者json文件,请点击左侧的重启来查看效果!如果只更改了样式和布局,那么直接F5刷新就可看到效果!
3.配置app.json的时候,请保证所有要显示的界面都配置上,并且之间不要留注释!
4.也是刚刚得到的福利,送给大家:
环境搭建
地球人都知道此次微信官方发布小程序的内测版只给了200个测试名额,作为茫茫人海中的我,毫无悬念的没有我的份,对此,小编我还是要给一个大大的表情!!!尽管如此,小编我还是找到了工具,没时间解释太多,上车走人!这里小编提供一份优化(你懂得)的工具,有兴趣的可以上车试试喔! 微信开发者工具下载 领取密码:4xr9
安装就不说了,一路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的值 4...
地图定位实例
好了,说了这么多口都干了,还是不啰嗦了,直接上咱们的小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--> <view class="wrapper"> <view class="page-body"> <view class="page-body-wrapper"> <form bindsubmit="openLocation"> <view class="page-body-form"> <text class="page-body-form-key">经度</text> <input class="page-body-form-value" type="text" value="{{location.longitude}}" name="longitude"></input> <text class="page-body-form-key">纬度</text> <input class="page-body-form-value" type="text" value="{{location.latitude}}" name="latitude"></input> <text class="page-body-form-key">位置名称</text> <input class="page-body-form-value" type="text" value="总部基地二区" name="name"></input> <text class="page-body-form-key">详细位置</text> <input class="page-body-form-value" type="text" value="浙江大学滨海产业技术研究院" name="address"></input> </view> <view class="page-body-buttons"> <button class="page-body-button" type="primary" bindtap="getLocation">获取位置</button> <button class="page-body-button" type="primary" formType="submit">查看位置</button> </view> </form> </view> </view> </view>
然后再根据我们的需要,在index.wxss文件里面写入基本的样式
/**index.wxss**/ .wrapper{ height: 100%; background:#fff; } .page-body-form-value{ font-size: 14px; color:darkturquoise; font-weight: bold; padding-left: 15px; border: 1px solid rgb(72, 165, 131); border-radius: 4px; height: 30px; line-height: 30px; } .page-body-form-key{ font-size:14px; padding: 10px; margin-top:15px; font-family: "Microsoft Yahei"; font-weight: bold; height: 30px; line-height: 30px; } .page-body-button{ margin-top:20px; line-height: 2; }
界面搭建完成,在index.wxml界面中,经纬度的获取我们采用双向绑定的机制从js中动态夺取(是不是想到了angularjs和vuejs呢),这又涉及到小程序的加载机制的问题,我将在后面的文章具体阐述,现在我们先忽略这些,本次重在走一遍流程实现效果为主!
打了这么久,还是先看看效果,点击左侧的调试按钮,刷新看到如下效果!
在index.wxml中,我们给表单中的经度和纬度输入框双向绑定经纬度的指,并给第一个按钮绑定了获取经纬度值的事件,当点击获取位置的按钮,就可以通过微信提供的接口获取我们想要的值,同时,我们也可以自己输入经纬度进行查询位置.
因此,接下来我们写获取地理位置的方法,打开index.js,输入以下代码:
//index.js //获取应用实例 var app = getApp() Page( { data: { //默认未获取地址 hasLocation: false }, //获取经纬度 getLocation: function(e) { console.log(e) var that = this wx.getLocation( { success: function( res ) { console.log( res ) that.setData( { hasLocation: true, location: { longitude: res.longitude, latitude: res.latitude } }) } }) }, //根据经纬度在地图上显示 openLocation: function( e ) { var value = e.detail.value wx.openLocation( { longitude: Number( value.longitude ), latitude: Number( value.latitude ) }) } })
在index.js中我首先定义了页面加载的时候hasLocation:false,也就是默认不加载地理位置,当点击获取地理位置的时候,通过getLocation方法获取到当前的经纬度位置,并将他以对象的形式返回回去,这样,在前端界面的input输入框中,通过{{location.longitude}}和{{location.latitude}}就可以动态获取到经纬度的值!
在调试中,我们点击获取地址按钮,得到我们想要的结果
得到地理位置后,我们就可以将这些数据发送给微信的打开地图的接口,以此来在地图中展示位置信息,给form表单绑定openLocation事件,这样当点击查看位置按钮,就可以将地理位置信息发送给openLocation事件,通过这个接口在地图中打开位置!
总结
1.首先说明的事,本篇文章重在梳理以下开发的流程,从一个小demo中去理解小程序的实现过程,涉及到的数据绑定,加载机制等等都没做深入讨论!(来啊!互相伤害啊!)2.在调试页面的时候,如果是更改了js或者json文件,请点击左侧的重启来查看效果!如果只更改了样式和布局,那么直接F5刷新就可看到效果!
3.配置app.json的时候,请保证所有要显示的界面都配置上,并且之间不要留注释!
4.也是刚刚得到的福利,送给大家:
小程序API入口
github大神开源的demo
相关文章推荐
- 微信小程序 实现获取当前位置并在地图上显示
- 微信小程序之获取当前位置经纬度以及地图显示详解
- 微信jssdk获取当前位置,以及打开微信地图
- Android高德地图获取当前地理位置(不显示地图只获取当前位置)
- Android基于mAppWidget实现手绘地图(十二)–显示当前用户位置
- 微信公众号开发《三》微信JS-SDK之地理位置的获取与在线导航,集成百度地图实现在线地图搜索
- iOS 地图显示比例设置 (这里是当前的位置信息代理方法中实现)
- 微信jssdk获取当前位置,以及打开微信地图
- 原生js实现使用谷歌api获取当前位置信息(不使用地图)
- Mui 获取当前位置及在地图上显示
- 微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
- 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索
- MKMapView上获取自身当前位置并将地图显示范围控制在自身位置周围
- C#实现微信结合百度api获取当前用户地理位置的方法
- 微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
- HTML5 调用 GPSAPI 获取当前位置的坐标 显示在地图上(有包括百度地图与谷歌地图)
- 微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
- html5定位获取当前位置并在百度地图上显示
- 获取当前位置并利用百度地图显示
- 百度地图API应用之——利用定位SDK和地图SDK来进行定位和显示当前位置