微信小程序如何获取用户当前定位所在城市

1,222 阅读1分钟

要在微信小程序中获取用户当前所在的城市,你可以使用微信小程序的API接口,结合腾讯地图SDK。以下是具体的操作步骤:

  1. 首先,你需要在微信公众平台上注册你的小程序,并获取到你的AppID。
  2. 在你的小程序项目中,打开app.json文件,添加地图功能所需的权限。这里需要加入地理位置的权限。
{
  "pages": [
    // ...
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用于获取附近的XXX服务"
    }
  }
}
  1. 下载腾讯地图SDK(微信小程序版),并将SDK文件放到你的小程序项目中。你可以在腾讯地图开放平台下载SDK,并获取你的Key。lbs.qq.com/
  2. 在你的小程序项目中创建一个新的JS文件,例如命名为locationUtil.js
  3. 将腾讯地图SDK文件(如:qqmap-wx-jssdk.js)放在与locationUtil.js同级的目录下。
  4. locationUtil.js中引入腾讯地图SDK,并初始化:
const QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
const qqmapsdk = new QQMapWX({
  key: '你的腾讯地图Key'
});

7.在locationUtil.js中编写一个getCityName函数,用于获取城市名:

function getCityName(callback) {
  wx.getLocation({
    type: 'gcj02',
    success: function (res) {
      const latitude = res.latitude;
      const longitude = res.longitude;
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: latitude,
          longitude: longitude
        },
        success: function (res) {
          const cityName = res.result.address_component.city;
          callback(null, cityName);
        },
        fail: function (error) {
          callback(error, null);
        }
      });
    },
    fail: function (error) {
      callback(error, null);
    }
  });
}
  1. 导出getCityName函数:
module.exports = {
  getCityName: getCityName
};
  1. 在其他页面或组件的.js文件中,引入locationUtil.js并调用getCityName函数:
const locationUtil = require('../../utils/locationUtil.js');

Page({
  onLoad: function () {
    locationUtil.getCityName((error, cityName) => {
      if (error) {
        console.log("获取城市名失败:" + error);
      } else {
        console.log("用户所在城市:" + cityName);
      }
    });
  }
});

这样,你就可以在其他页面或组件中轻松地使用locationUtil.js提供的getCityName函数来获取用户所在的城市了。 以上为chatGPT的回答。