介绍页面({/* *
*页面的初始数据
*/数据:{
旋转:0,
学位:& # 39;未知& # 39;,
方向:& # 39;& # 39;
纬度:0,
朗:0,
alt: 0
},/* *
*生命周期函数——监听页面加载
*/> & lt;视图类=癱ontainer"祝辞
& lt;图像src=https://www.yisu.com/zixun/1.“/图片/jpg”模式=" widthFix ">
<视图类="地位">
<文本类=" bigTxt ">{{学位}}°{{方向}}
<文本类=" smallTxt ">北纬{{lat}}东经{{朗}}
<文本类=" smallTxt ">海拔{{alt}}米
.container {
身高:100 vh;
显示:flex;
flex-direction:列;
对齐项目:中心;
justify-content:空间;
颜色:# A46248;
}
{形象
宽度:80%;
}
.status {
显示:flex;
flex-direction:列;
对齐项目:中心;
}
.bigTxt {
字体大小:30分;
保证金:15 rpx;
}
.smallTxt {
字体大小:20分;
保证金:15 rpx;
} 应用程序({/* *
*当小程序初始化完成时,会触发> {
“pages":(
“页面/索引/index"
),
“window": {
“backgroundTextStyle":“light"
“navigationBarBackgroundColor":“# fff"
“navigationBarTitleText":“指南针“,
“navigationBarTextStyle":“black"
},
“permission": {
“scope.userLocation": {
“desc":“你的位置信息将用于小程序指南针的效果展示“;
}
},
“style":“v2"
“sitemapLocation":“sitemap.json"
}
本篇文章为大家展示了使用微信小程序实现指南针功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
涉及技术:获取地理位置,监听指南针角度
目录结构:
页\指数\索引。js
\指数\索引页面。wxs
应用程序。js
运行截图:
上述内容就是使用微信小程序实现指南针功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
