小程序获取当前用户地址及地图显示

步骤

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

wx.getLocation({type: 'wgs84', //wgs返回 gps坐标， gcj02返回可用于wx.openLocation 的坐标altitude: 'false' //true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度success (res) { //接口调用成功的回调函数const latitude = res.latitude // 纬度，范围为 -90~90，负数表示南纬const longitude = res.longitude // 经度，范围为 -180~180，负数表示西经const speed = res.speed // 速度，单位 m/sconst accuracy = res.accuracy // 位置的精确度const altitude = res.altitude // 高度，单位 m...},fail (err) { //接口调用失败的回调函数},complete(){}
})
注意：
工具中定位模拟使用IP定位，可能会有一定误差。且工具目前仅支持 gcj02 坐标。
使用第三方服务进行逆地址解析时，请确认第三方服务默认的坐标系，正确进行坐标转换。
（后面需要使用获取到的数据打开微信内置地图,最好使用gjc02）

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

wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success (res) {const latitude = res.latitudeconst longitude = res.longitudewx.openLocation({latitude,longitude,scale: 18})}
})
微信公众平台API：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.openLocation.html

使用wx.chooseLocation来打开地图选择位置.(建议在手机上调试)

wx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success (res) {const latitude = res.latitudeconst longitude = res.longitudewx.openLocation({latitude,longitude,wx.chooseLocation({success: function(res) {console.log('定位成功')},})})}
})

实例

<button bindtap="getLocation">获取当前地址</button>getLocation () {let _this = thiswx.getLocation({type: 'gcj02',success(res) {console.log('获取地理经纬度成功' + res)_this.setData({latitude: res.latitude,longitude: res.longitude})wx.openLocation({latitude: res.latitude,longitude: res.longitude,scale: 18,success(res){console.log('打开地址位置成功')wx.chooseLocation({success: function(res) {console.log('定位成功')},fail(err){console.log('定位失败' + err)}})}})},fail(err){console.log(err)}})},缺点：地狱回调，建议异步

缺陷：
使用 wx.getLocation来获取当前位置时：当用户使用 wx.getLocation来获取当前位置，取消位置获取授权之后,再次点击获取位子按钮小程序不会再提醒用户是否授权,这个时候最好自己弹出提示框让用户去设置页面开启授权设置
解决办法： 添加用户是否初次进入该页面以及是否地理位置授权的判断
代码：

wx.getSetting({success: (res) => {console.log(JSON.stringify(res))// res.authSetting['scope.userLocation'] == undefined  表示 初始化进入该页面// res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权// res.authSetting['scope.userLocation'] == true    表示 地理位置授权if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {// 非初始化进入该页面 && 未授权wx.showModal({ // 弹出提示框让用户去设置页面开启授权设置title: '请求授权当前位置',content: '需要获取您的地理位置，请确认授权',success (res) {if (res.cancel) {wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})//再次授权，此处省略调用wx.getLocation的API} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//初次进入该页面，此处省略调用wx.getLocation的API}else {// 地理位置授权成功 ，此处省略调用wx.getLocation的API}}})

小程序获取当前用户地址及地图显示相关推荐

腾讯微搭小程序获取微信用户信息
腾讯微搭小程序获取微信用户信息无论你对低代码开发的爱与恨, 微信生态的强大毋庸置疑. 因此熟悉微搭技术还是很有必要的! 在大多数应用中, 都需要获取和跟踪用户信息. 本文就微搭中如何获取和存储用户信 ...
微信小程序获取客户端IP地址,HTTPS接口(ts\js)
微信小程序获取用户IP地址,HTTPS接口很简单实用的ip地址接口, 只返回当前ip 接口返回内容格式为: {"ip":"27.211.239.98"} // ...
微信小程序Ⅴ [获取登录用户信息，重点openID(详解)]
♩ 背景其实这篇文章几个月前就写完了,但是这段时间,微信小程序官方文档有了更新,同事在我自己的实际操作过程中,发现之前写的过于繁杂,所以现在进行简化梳理,欢迎指摘. 语言框架:ThinkPHP3.2 ...
从微信服务器获取用户信息,微信小程序Ⅴ [获取登陆用户信息，重点openID(详解)]...
♩ 背景其实这篇文章几个月前就写完了,可是这段时间,微信小程序官方文档有了更新,同事在我本身的实际操做过程当中,发现以前写的过于繁杂,因此如今进行简化梳理,欢迎指摘. 语言框架:ThinkPHP3. ...
微信小程序获取微信用户步数
小程序开发代码 -js // index.js // 获取应用实例 const app = getApp()Page({data: {motto: 'Hello World',userInfo: {} ...
微信小程序获取收货地址及存储收货地址
这个城市数据的js直接放网盘了我链接:https://pan.baidu.com/s/18UsJ1VUxEI-7LJjVW8BW4w 提取码:mmao wxml <view class=&q ...
微信小程序获取当前城市地址
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); var qqmapcity_name:"",onLoad: func ...
小程序获取微信用户绑定的手机号
小程序API内提供getPhoneNumber借口来获取用户已经绑定到微信的手机号,但需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用; 基本流程如下: 使用方法需要将 < ...
支付宝小程序获取php用户id,02支付宝小程序（基于知晓云）~如何获取用户ID
一.引入SDK 初始化成功后二.支付宝小程序管理平台,增加[获取会员信息功能] 否则如下错误三.获取用户ID 1.在app.js增加用户注册功能并缓存用户信息 // 注册用户~到知晓云平台 fun ...

小程序获取当前用户地址及地图显示

步骤

实例

小程序获取当前用户地址及地图显示相关推荐

最新文章

热门文章

小程序 获取当前用户地址及地图显示

步骤

实例

小程序 获取当前用户地址及地图显示相关推荐

最新文章

热门文章

小程序获取当前用户地址及地图显示

小程序获取当前用户地址及地图显示相关推荐