博客

微信小程序关于位置信息的获取以及地图输出

最近去参加了数学竞赛，题目和预期的偏差有点大，结果应该还算不甚理想，有机会做一下复盘。

回归主题，这周日试了下在微信小程序中获取设备的位置信息并使用地图输出，参考文档就是微信小程序官方文档的map组件部分。

仙人指路：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

吐槽一句：文档看了小半天，自己摸索了好久才弄懂，以为是用插件导入腾讯地图，没想到最后是直接使用map标签就可以实现了。

位置信息的获取

请求

首先获取位置信息需要设备的允许，我们需要在全局的app.json文件做一定的配置，做一个请求获取位置信息

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  },

获取位置信息方法

然后我们在map界面的js文件中，设置获取位置信息的方法

Page({
    /**
     * 页面的初始数据
     */
    data: {
      // 纬度和经度，并赋初值
      latitude: 10.11,
      longitude: 10.11,
    },
   
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      var that = this
      //获取当前的地理位置
      wx.getLocation({
        // 获取成功
        success: function (res) {
          //赋值经纬度
          that.setData({
            latitude: res.latitude,
            longitude: res.longitude,
          })
        }
      })
    },
})

地图

我们获取到的信息就可以用于在map标签中输出即可，可以在wxss文件中设置满屏

wxml文件

根据文档，longitude和latitude是必填的，实测不填的话就给显示到北京（人在深圳），所以我们可以把js文件中data的数据longitude和latitude直接用就可以了，然后设置高和宽，注意，一定要在wxss文件中设置高为100%

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

wxss文件

page
{
  height: 100%;
}

样图

小bug

好了，就这样，欸，等等，有点问题啊，这怎么给我定位在另一个地方？？？

问了一个dalao后才知道，是因为电脑的定位的问题，使用手机调试后就好了。（这个图就不发了，省得你们顺着地址来骚扰我==）

欸，等等，有点问题啊，这怎么给我定位在另一个地方？？？

问了一个dalao后才知道，是因为电脑的定位的问题，使用手机调试后就好了。（这个图就不发了，省得你们顺着地址来骚扰我==）