uni-app微信小程序获取用户地理位置信息 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

uni-app微信小程序获取用户地理位置信息

发表时间:2020-10-8

发布人:葵宇科技

浏览次数:96

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;

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

相关案例查看更多