微信小程序開發(fā)--獲取位置信息
1 獲取當(dāng)前地理位置，首先要拿到用戶的授權(quán)wx.openSetting
在這里插入圖片描述
在用戶首次進(jìn)入某頁面（需要地理位置授權(quán)）時候溅话，在頁面進(jìn)行onLoad崇败，onShow時候盅称，進(jìn)行調(diào)用wx.getLocation要求用戶進(jìn)行授權(quán)；以后每次進(jìn)入該頁面時后室，通過wx.getSetting接口缩膝，返回用戶授權(quán)具體信息。
wx.getSetting接口具體API地址鏈接為點擊鏈接
在這里插入圖片描述
當(dāng)該標(biāo)志是underfind岸霹，表示用戶初次進(jìn)入該頁面疾层，當(dāng)該標(biāo)志是false，表示用戶初次進(jìn)入該頁面拒絕了地理授權(quán)贡避，應(yīng)進(jìn)行重新要求獲取授權(quán)痛黎。
wx.getSetting({
success: (res) => {
console.log(JSON.stringify(res))
// res.authSetting['scope.userLocation'] == undefined 表示 初始化進(jìn)入該頁面
// res.authSetting['scope.userLocation'] == false 表示 非初始化進(jìn)入該頁面,且未授權(quán)
// res.authSetting['scope.userLocation'] == true 表示 地理位置授權(quán)
if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
wx.showModal({
title: '請求授權(quán)當(dāng)前位置',
content: '需要獲取您的地理位置，請確認(rèn)授權(quán)',
success: function (res) {
if (res.cancel) {
wx.showToast({
title: '拒絕授權(quán)',
icon: 'none',
duration: 1000
})
} else if (res.confirm) {
wx.openSetting({
success: function (dataAu) {
if (dataAu.authSetting["scope.userLocation"] == true) {
wx.showToast({
title: '授權(quán)成功',
icon: 'success',
duration: 1000
})
//再次授權(quán)贸桶，調(diào)用wx.getLocation的API
} else {
wx.showToast({
title: '授權(quán)失敗',
icon: 'none',
duration: 1000
})
}
}
})
}
}
})
} else if (res.authSetting['scope.userLocation'] == undefined) {
//調(diào)用wx.getLocation的API
}
else {
//調(diào)用wx.getLocation的API
}
}
})
2舅逸、微信小程序地圖展示位置信息
在拿到用戶授權(quán)以后，使用微信的API獲取當(dāng)前位置的經(jīng)緯度微信獲取位置API
onLoad: function () {
wx.getLocation({
success: res=> {
console.log(res);
this.setData({
location: res,
})
// console.log(app.globalData.location);
},
})
}
實現(xiàn)效果如下圖：
在這里插入圖片描述
微信小程序也支持在地圖上選點皇筛，獲取定位信息（wx.chooseLocation）和使用微信內(nèi)置地圖查看位置（wx.openLocation）
3、結(jié)合百度地圖獲取位置信息
微信小程序的接口坠七，只能得到經(jīng)緯度水醋，但有時候我們需要得到具體的城市或者區(qū)域信息旗笔，這就需要借助百度地圖了（==或者騰訊地圖等，邏輯都是一樣的==）拄踪。
- 第一步：先到百度開放平臺http://lbsyun.baidu.com申請ak（鏈接地址為：http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key）
- 第二步：在服務(wù)器配置中添加百度地圖的服務(wù)器（https://api.baidu.com）
- 第三步：下載百度地圖的api 蝇恶，鏈接：http://download.csdn.net/detail/michael_ouyang/9754015
- 第四步：引入JS模塊，將下載的js放到工程目錄下
- 第五步：在所需的js文件內(nèi)導(dǎo)入js
var bmap = require('../../libs/bmap-wx/bmap-wx.js'); - 第六步：編輯代碼 惶桐，此處我獲得的是城市信息撮弧，可以log出信息，選擇自己要顯示的信息姚糊，用setData的方式放入數(shù)據(jù)中進(jìn)行展示即可
var BMap = new bmap.BMapWX({
ak: that.data.ak,
});
console.log(BMap)
var fail = function(data) {
console.log(data);
};
var success = function(data) {
//返回數(shù)據(jù)內(nèi)贿衍，已經(jīng)包含經(jīng)緯度
console.log(data);
//使用wxMarkerData獲取數(shù)據(jù)
// = data.wxMarkerData;
wxMarkerData=data.originalData.result.addressComponent.city
//把所有數(shù)據(jù)放在初始化data內(nèi)
console.log(wxMarkerData)
that.setData({
// markers: wxMarkerData,
// latitude: wxMarkerData[0].latitude,
// longitude: wxMarkerData[0].longitude,
address: wxMarkerData
});
}
// 發(fā)起regeocoding檢索請求
BMap.regeocoding({
fail: fail,
success: success
});
},
