校内综合实训——完善地图定位及个人主页

最新推荐文章于 2026-01-06 08:15:19 发布

原创最新推荐文章于 2026-01-06 08:15:19 发布 · 338 阅读

CC 4.0 BY-SA版权

博客主要讲述了两项功能的完善。一是地图定位，之前作业仅显示地图，此次通过设置show - location属性为true显示当前定位点；二是个人主页，之前只获取头像和名称，此次修改设置了页面背景，还介绍了图片转Base64方法及制作圆形头像的样式设置。

一、完善地图定位

在之前的作业中只完成了地图的显示，没有出现当前定位点，因此做出了相应的改进。

在map标记中设置show-location属性为true即可显示当前定位点

（一）部分源代码

<view style='width:100%;height:100%'>
<map longitude="{{longitude}}" latitude="{{latitude}}" scale="13" show-location="true" style='width:100%;height:100vh'></map>
</view>

（二）运行截图

二、完善个人主页

在之前的作业中，只是获得了用户的头像和名称，没有设置当前页面的背景，在此做出了相应的修改。在修改的过程中，了解到将图片转Base64的方法如下：

wx.chooseImage({
   success: res => {
   wx.getFileSystemManager().readFile({
      filePath: res.tempFilePaths[0], //选择图片返回的相对路径
      encoding: 'base64', //编码格式
      success: res => { //成功的回调
      console.log('data:image/png;base64,' + res.data)
      }
   })
  }
})

用此方法可以获取图片的路径制作当前页面的背景。除此之外，在制作圆形头像的过程中，也遇到了一些麻烦。通过查阅资料发现，需要给相关标签设置border-radius:50%;display:flex;overflow:hidden才能呈现圆形的效果。

（一）部分源代码

<view class="bg">
<view class="flex-wrp" style="flex-direction:column;">
<view style="width:100rpx;height:100rpx">
<open-data type="userAvatarUrl" class="auto-img"></open-data>
</view>
<open-data type="userNickName" style="color:#fff"></open-data>
</view>
</view>

<view class="flex-wr" style="flex-direction:column;">
  <view>设备品牌:{{brand}}</view>
  <view>设备型号:{{model}}</view>
  <view>设备版本号:{{system}}</view>
  <view>设备像素比:{{pixelRatio}}</view>
  <view>屏幕宽度:{{screenWidth}}</view>
  <view>屏幕高度:{{screenHeight}}</view>
</view>