微信小程序获取当前地址以及选择地址详解

我只写了简单的页面结构,在wxml文件中写入一个button组件,并在button上添加点击getLocation事件.

微信小程序获取当前地址以及选择地址详解_第1张图片

第一步:使用getLocation获取当前地理位置

        在js文件中写入getLocation方法,并且调用微信小程序的API wx.getLocation来获取当前位置.点击按钮时会弹出授权框进行授权,如果用户确认授权则会在success函数中返回相应的位置数据,如果取消,那么会在fail函数中返回获取位置失败的相关信息.

        注意: 当用户取消位置获取授权之后,再次点击获取位子按钮小程序不会再提醒用户是否授权,这个时候最好自己弹出提示框让用户去设置页面开启授权设置.

微信小程序获取当前地址以及选择地址详解_第2张图片                

获取位置成功之后会得到的数据如下:

微信小程序获取当前地址以及选择地址详解_第3张图片


        注意:getLocation方法中的参数type有两个值:wgs84 以及gcj02,查了下是两种坐标系,有一定的偏差.但是每个地方的偏差大小不太一样,我用两个值打印出来的位置坐标没有区别.文档上说如果后面需要使用获取到的数据打开微信内置地图,最好使用gjc02.

第二步:使用wx.openLocation打开地址位置

        获取到当前经纬度使用wx.openLocation将经纬度传进去就可以打开地图并标记当前位置.

微信小程序获取当前地址以及选择地址详解_第4张图片

注意:在电脑上获取到的位置可能不是很准,在手机上基本上可以准确定位.

第三步:在openLocation调用成功的回调函数里面使用wx.chooseLocation来选择位置.(建议在手机上调试)

微信小程序获取当前地址以及选择地址详解_第5张图片         微信小程序获取当前地址以及选择地址详解_第6张图片


用户点击确定就可以获得选择之后的地理位置信息:

微信小程序获取当前地址以及选择地址详解_第7张图片


当然.这样写会形成回调地狱,建议使用异步函数或者wepy搭建小程序项目.

(第一次写,啰嗦并且思绪不通好像,还请见谅)

你可能感兴趣的:(微信小程序获取当前地址以及选择地址详解)