今天開始搞這個東西,下面是詳細的記錄
先看一下效果啦
1.小程序代碼先獲取用戶基礎位置信息
js
data: {
myLocation: 'GET LOCATION',
},
openMap() {
var myThis = this
wx.getLocation({
type: 'gcj02', // 默認為 wgs84 返回 gps 坐標,gcj02 返回可用於 wx.openLocation 的坐標
success: function (res) {
// success
console.log('獲取位置2');
myThis.setData({
myLocation: JSON.stringify(res)
})
console.log(res.latitude);
console.log(res.longitude);
wx.openLocation({
latitude: res.latitude, // 緯度,范圍為-90~90,負數表示南緯
longitude: res.longitude, // 經度,范圍為-180~180,負數表示西經
scale: 28, // 縮放比例
name: "要找的地方名字(某某飯店)",
address: "地址:要去的地點詳細描述"
})
}
})
},
openMap1() {
var myThis = this
wx.getLocation({
type: 'wgs84',
success(res) {
// 緯度,范圍為 -90~90,負數表示南緯
const latitude = res.latitude
// 經度,范圍為 -180~180,負數表示西經
const longitude = res.longitude
// 速度,單位 m/s
const speed = res.speed
// 位置的精確度,反應與真實位置之間的接近程度,可以理解成10即與真實位置相差10m,越小越精確
const accuracy = res.accuracy
myThis.setData({
myLocation: '當前經度:' + latitude + '\n' + '當前緯度:' + longitude + '\n' + '當前速度:' + speed + '\n' + '當前位置精確度:' + accuracy
})
console.log(res.latitude);
console.log(res.longitude);
}
})
},
html
<button type="default" bindtap="openMap">點擊打開地圖</button>
<button type="default" bindtap="openMap1">點擊獲取我的位置</button>
<text >{{myLocation}}</text>
app.json
"pages": [
"pages/index/index"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用於小程序位置接口的效果展示"
}
},
下面開始調用騰訊地圖API進行解析我們的經緯度
注冊賬號
創建應用,獲取KEY,
發請求進行經緯度解析