android指南针小程序,使用微信小程序实现指南针功能

使用微信小程序实现指南针功能

发布时间：2020-10-26 15:18:16

来源：亿速云

阅读：79

作者：Leah

本篇文章为大家展示了使用微信小程序实现指南针功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

涉及技术：获取地理位置、监听指南针角度

目录结构：

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&&deg<70){

dir='东北';

}else if(deg>=70&&deg<=110){

dir='东';

}else if(deg>110&&deg<160){

dir='东南';

}else if(deg>=160&&deg<=200){

dir='南';

}else if(deg>200&&deg<250){

dir='西南';

}else if(deg>=250&&deg<=290){

dir='西';

}else if(deg>290&&deg<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

{{degree}}°{{direction}}

北纬{{lat}}东经{{lon}}

海拔{{alt}}米

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"

}

运行截图：

上述内容就是使用微信小程序实现指南针功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。