微信小程序 获取位置信息
微信小程序点击获取位置信息
效果图:
点击工程位置即可打开地图
小程序前端代码
<view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10' bindtap='getLocation'>
<label class='fl m_t5'>工程位置</label>
<text class='fr m_t5'>﹀</text>
<input class='tr fr' type='text' disabled='disabled' value='{{userlocation}}'></input>
<view class='cl'></view>
</view>
js代码
//选择所在区域
getLocation: function (e) {
var that = this;
wx.showLoading({
title: '加载中',
})
wx.chooseLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
console.log("test:" + res)
wx.hideLoading();
var latitude = res.latitude
var longitude = res.longitude
console.log(res)
that.setData({
userlocation: res.name, //位置
latitude: latitude,
longitude: longitude,
})
},
fail: function (res) {
console.log('拒绝');
wx.getSetting({
success: function (ress) {
console.log(ress)
if (ress.authSetting['scope.userLocation'] == false) {
wx.showModal({
title: '提示',
content: '您已拒绝授权地理位置信息,是否前去打开?',
success(res) {
if (res.confirm) {
wx.openSetting(); //调起小程序设置界面s
}
}
})
}else{
console.log("已授权位置,取消选择位置")
}
}
})
},
complete: function () {
wx.hideLoading();
}
})
},
WXSS
.inputs{
width: 100%;
border-radius: 10rpx;
}
.inputs input{
/* width: 68%; */
text-align: right!important;
display: inline-block;
padding-right: 15rpx;
}