uni-app 小程序项目获取地理位置

uni-app 小程序项目无法直接获取到地理位置,只能通过获取到的经纬度,调用第三方地图Api获取。

  1. 在 manifest.json - 微信小程序配置 - 填写微信小程序AppID、选择位置接口,填写申请原因
    uni-app 小程序项目获取地理位置_第1张图片
  2. 选择第三方地图Api,因为是做小程序,这里选择腾讯地图
  3. 注册、登陆后,在控制台 - key管理中创建秘钥 uni-app 小程序项目获取地理位置_第2张图片
  4. 引入腾讯地图Api
  5. 授权调用已经封装好的方法,获取经纬度解析出地理位置信息
  6. 如果用户未授权,默认会执行fail回调,所以添加提示框进行重新授权确认
/**
 * @Author: licheng
 * @Date: 2019/12/21 6:06 下午
 * @Description:
 */
import QQMapWX from "../static/js/qqmap-wx-jssdk.min.js";

const getCity = () => {
  return new Promise((resolve, reject) => {
    // 获取授权信息
    uni.getSetting({
      success: res => {
        // console.log(res);
        if (res.authSetting && res.authSetting.hasOwnProperty("scope.userLocation")) {
          if (res.authSetting["scope.userLocation"]) {
            getCityInfo();
          } else {
            uni.showModal({
              title: "提示",
              content: "请重新授权获取你的地理位置,否则部分功能将无法使用",
              success: (res) => {
                if (res.confirm) {
                  uni.openSetting({
                    success: () => getCityInfo()
                  });
                } else {
                  reject("请授权获取你的地理位置,否则部分功能将无法使用!");
                }
              },
            });
          }
        } else {
          getCityInfo();
        }
      }
    });

    // 获取地理位置信息
    const getCityInfo = () => {
      // 腾讯地图Api
      const qqmapsdk = new QQMapWX({ key: "这里填写腾讯地图的秘钥" });
      // 授权
      uni.authorize({
        scope: "scope.userLocation",
        success: () => {
          uni.getLocation({
            type: "gcj02", //  wgs84: 返回GPS坐标,gcj02: 返回国测局坐标
            success: res => {
              const {latitude, longitude} = res;
              const location = {latitude, longitude};
              qqmapsdk.reverseGeocoder({
                location,
                success: res => resolve(res.result)
              });
            }
          });
        },
        fail: () => reject("请授权获取你的位置,否则部分功能将无法使用!"),
      });
    };
  });
};

export default getCity;

你可能感兴趣的:(Uni-App)