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

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

  1. 在 manifest.json - 微信小程序配置 - 填写微信小程序AppID、选择位置接口,填写申请原因
    在这里插入图片描述
  2. 选择第三方地图Api,因为是做小程序,这里选择腾讯地图
  3. 注册、登陆后,在控制台 - key管理中创建秘钥 在这里插入图片描述
  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;
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值