打造个性化体验：用微信小程序实时显示用户地理位置

2023-10-25 16:29:48

技术指南：轻松获取用户当前地理位置

引入微信小程序定位组件

首先，在微信小程序的项目中引入定位组件，以便后续调用相关API。在 app.js 文件中添加如下代码：

import location from './utils/location.js'

App({
  location
})

使用定位API获取用户地理位置

调用 wx.getLocation API，该API可获取用户当前的地理位置信息。在页面逻辑代码中添加如下代码：

getLocation: function () {
  wx.getLocation({
    type: 'gcj02',
    success: (res) => {
      const latitude = res.latitude
      const longitude = res.longitude
      this.setData({
        latitude,
        longitude
      })
    }
  })
},

在页面上显示用户地理位置

通过setData方法将获取到的经纬度数据更新到页面数据，然后通过模板语法显示在地图组件中。在页面模板中添加如下代码：

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}"/>

处理用户授权

当用户首次使用小程序时，需要进行地理位置授权。开发者需要在用户授权后才能调用定位API。如果用户拒绝授权，则无法获取地理位置信息。

wx.getLocation({
  type: 'gcj02',
  success: (res) => {
    const latitude = res.latitude
    const longitude = res.longitude
    this.setData({
      latitude,
      longitude
    })
  },
  fail: () => {
    wx.showModal({
      title: '位置信息授权',
      content: '我们需要您的位置信息才能为您提供更准确的服务',
      success: (res) => {
        if (res.confirm) {
          wx.openSetting({
            success: (res) => {
              if (res.authSetting['scope.userLocation']) {
                this.getLocation()
              }
            }
          })
        }
      }
    })
  }
})