微信小程序实现获取当前位置并在地图上显示案例Word文件下载.docx
《微信小程序实现获取当前位置并在地图上显示案例Word文件下载.docx》由会员分享，可在线阅读，更多相关《微信小程序实现获取当前位置并在地图上显示案例Word文件下载.docx（10页珍藏版）》请在冰点文库上搜索。
）!
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配置路径的时候,不要写注释!
*"
是定义的全局名称,局部页面更高的方法在上面我已经提到过了!
（什么?
没看见?
诺!
就是在具体要更改的界面增加json文件,重定义navigationBarTitleText的值啦）!
指头部背景颜色,可自行更改!
配置好加载的页面和基本的头部信息后,我们打开pages/index/index.wxml文件,来搭建界面的基本布局!
<
!
--index.wxml-->
viewclass="
wrapper"
>
page-body"
page-body-wrapper"
formbindsubmit="
openLocation"
page-body-form"
textclass="
page-body-form-key"
经度<
/text>
inputclass="
page-body-form-value"
type="
text"
value="
{{location.longitude}}"
name="
longitude"
/input>
纬度<
{{location.latitude}}"
latitude"
位置名称<
总部基地二区"
name"
详细位置<
浙江大学滨海产业技术研究院"
address"
/view>
page-body-buttons"
buttonclass="
page-body-button"
primary"
bindtap="
getLocation"
获取位置<
/button>
formType="
submit"
查看位置<
/form>
然后再根据我们的需要,在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:
1pxsolidrgb（72,165,131）;
border-radius:
4px;
30px;
line-height:
.page-body-form-key{
padding:
10px;
margin-top:
font-family:
MicrosoftYahei"
;
.page-body-button{
20px;
2;
界面搭建完成,在index.wxml界面中,经纬度的获取我们采用双向绑定的机制从js中动态夺取（是不是想到了AngularJS和vuejs呢）,这又涉及到小程序的加载机制的问题,我将在后面的文章具体阐述,现在我们先忽略这些,本次重在走一遍流程实现效果为主!
打了这么久,还是先看看效果,点击左侧的调试按钮,刷新看到如下效果!
在index.wxml中,我们给表单中的经度和纬度输入框双向绑定经纬度的指,并给第一个按钮绑定了获取经纬度值的事件,当点击获取位置的按钮,就可以通过微信提供的接口获取我们想要的值,同时,我们也可以自己输入经纬度进行查询位置.
因此,接下来我们写获取地理位置的方法,打开index.js,输入以下代码:
//index.js
//获取应用实例
varapp=getApp（）
Page（{
data:
{
//默认未获取地址
hasLocation:
false
},
//获取经纬度
getLocation:
function（e）{
console.log（e）
varthat=this
wx.getLocation（{
success:
function（res）{
console.log（res）
that.setData（{
true,
location:
longitude:
res.longitude,
latitude:
res.latitude
}）
//根据经纬度在地图上显示
openLocation:
function（e）{
varvalue=e.detail.value
wx.openLocation（{
Number（value.longitude）,
Number（value.latitude）
}）
在index.js中我首先定义了页面加载的时候hasLocation:
false,也就是默认不加载地理位置,当点击获取地理位置的时候,通过getLocation方法获取到当前的经纬度位置,并将他以对象的形式返回回去,这样,在前端界面的input输入框中,通过{{location.longitude}}和{{location.latitude}}就可以动态获取到经纬度的值!
在调试中,我们点击获取地址按钮,得到我们想要的结果
得到地理位置后,我们就可以将这些数据发送给微信的打开地图的接口,以此来在地图中展示位置信息,给form表单绑定openLocation事件,这样当点击查看位置按钮,就可以将地理位置信息发送给openLocation事件,通过这个接口在地图中打开位置!
自此,我们的demo也就完成啦!
总结
1.首先说明的事,本篇文章重在梳理以下开发的流程,从一个小demo中去理解小程序的实现过程,涉及到的数据绑定,加载机制等等都没做深入讨论!
（来啊!
互相伤害啊!
）
2.在调试页面的时候,如果是更改了js或者json文件,请点击左侧的重启来查看效果!
如果只更改了样式和布局,那么直接F5刷新就可看到效果!
3.配置app.json的时候,请保证所有要显示的界面都配置上,并且之间不要留注释!
4.也是刚刚得到的福利,送给大家:
升级会员 