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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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


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

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