溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了使用微信小程序實現指南針功能，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
涉及技術：獲取地理位置、監聽指南針角度
目錄結構：
pages\index\index.js
Page({
/**
* 頁面的初始數據
*/
data: {
rotate:0,
degree:'未知',
direction:'',
lat:0,
lon:0,
alt:0
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
var that = this;
wx.getLocation({
altitude: true,
success:function(res){
that.setData({
lat:res.latitude.toFixed(2),
lon:res.longitude.toFixed(2),
alt:res.altitude.toFixed(2)
})
}
})
wx.onCompassChange(function(res){
let degree = res.direction.toFixed(0);
that.getDirection(degree)
that.setData({
rotate:360 - degree
})
})
},
/**
* 判斷方向
*/
getDirection:function(deg){
let dir = '未知';
if(deg>=340||deg<=20){
dir='北';
}else if(deg>20&°<70){
dir='東北';
}else if(deg>=70&°<=110){
dir='東';
}else if(deg>110&°<160){
dir='東南';
}else if(deg>=160&°<=200){
dir='南';
}else if(deg>200&°<250){
dir='西南';
}else if(deg>=250&°<=290){
dir='西';
}else if(deg>290&°<340){
dir='西北';
}
this.setData({
degree:deg,
direction:dir
})
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})pages\index\index.wxml
<view class="container">
<image src="/images/1.jpg" mode="widthFix" ></image>
<view class="status">
<text class="bigTxt">{{degree}}°{{direction}}</text>
<text class="smallTxt">北緯{{lat}}東經{{lon}}</text>
<text class="smallTxt">海拔{{alt}}米</text>
</view>
</view> pages\index\index.wxss
.container{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
color: #A46248;
}
image{
width: 80%;
}
.status{
display: flex;
flex-direction: column;
align-items: center;
}
.bigTxt{
font-size: 30pt;
margin: 15rpx;
}
.smallTxt{
font-size: 20pt;
margin: 15rpx;
} app.js
App({
/**
* 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
*/
onLaunch: function () {
},
/**
* 當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow
*/
onShow: function (options) {
},
/**
* 當小程序從前臺進入后臺，會觸發 onHide
*/
onHide: function () {
},
/**
* 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息
*/
onError: function (msg) {
}
})app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "指南針",
"navigationBarTextStyle":"black"
},
"permission":{
"scope.userLocation":{
"desc":"你的位置信息將用于小程序指南針的效果展示"
}
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}運行截圖：
上述內容就是使用微信小程序實現指南針功能，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
