uniapp逆地址解析,获取当前定位城市

1. 需去腾讯位置服务平台申请key并下载JavaScriptSDK

2. 在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com

3. 将解压后的文件放在common文件夹中

4. 在需要使用的页面中script引入const QQMapWX = require('@/common/qqmap-wx-jssdk.js');

5. 通过new QQMapWX({key:申请的key})

6. 获取到经纬度后进行转换qqMapSdk.reverseGeocoder({...})

<script>
const QQMapWX = require('@/common/qqmap-wx-jssdk.js');
export default {
    data() {
      return {
        qqMapSdk: null,
        city: '北京'
      };
    },
    onShow() {
      // 是否有选中城市
      const choosedCity = uni.getStorageSync('choosedCity')
      if(choosedCity){
        this.city = choosedCity
        uni.removeStorageSync('choosedCity')
      } else {
        this.qqMapSdk = new QQMapWX({
            key: '申请的key'
          });
        this.getUserLocation()
      }
    },
    methods: {
      // 获取位置信息
      getUserLocation() {
        uni.getLocation({
          type: 'wgs84',
          success: (res) => {
            this.formatLocation(res.latitude,res.longitude)
          },
          fail: (res) => {
            if (res.errMsg == "getLocation:fail auth deny"){
              uni.showModal({
                content: '检测到您没打开获取信息功能权限,是否去设置打开?',
                confirmText: "确认",
                cancelText: '取消',
                success: (res) => {
                  if (res.confirm) {
                    uni.openSetting({
                      success: (res) => {
                        console.log('确定');
                      }
                    })
                  } else {
                    console.log('取消');
                    return false;
                  }
                }
              })
            }
          }
        })
      },
      // 转换城市
      formatLocation(latitude, longitude) {
        this.qqMapSdk.reverseGeocoder({
          location: {
            latitude,
            longitude
          },
          success: (res) => { 
            let cityName = res.result.address_component.city
            this.city=cityName.slice(0,cityName.length-1)
          },
          fail: () => {
            this.city = '北京'
          }
        })
      },
    }
  }
</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp 是一款基于Vue.js开发的跨平台应用开发框架,可以让我们使用Vue.js开发一次,同时发布到多个平台,包括iOS、Android和H5等。 要在Uniapp中使用天地图获取当前定位,我们可以按照以下步骤进行: 第一步,安装相关插件。 在Uniapp项目的根目录下,通过命令行运行以下命令来安装`tmt`插件: ``` npm install tmt -S ``` 第二步,配置天地图API。 在`main.js`文件中,引入并配置天地图的API密钥。我们可以从天地图官网获取到API密钥,然后在`main.js`中添加以下代码: ```javascript import TMT from 'tmt'; Vue.use(TMT, { ak: '你的天地图API密钥' }); ``` 第三步,获取当前定位。 我们可以在需要获取定位信息的页面中,使用以下代码来获取当前定位信息: ```javascript export default { data() { return { location: null }; }, methods: { getLocation() { this.$tmt.getLocation().then(res => { this.location = res; console.log(this.location); }).catch(error => { console.error('获取定位失败:', error); }); } }, mounted() { this.getLocation(); } } ``` 在上述代码中,我们使用了`$tmt`来调用插件提供的方法`getLocation()`来获取当前定位信息。获取成功后,定位信息将存储在`location`变量中。 以上就是使用Uniapp获取当前定位的简要步骤。通过安装插件、配置API密钥和调用相关方法,我们就可以在Uniapp中轻松地获取当前定位信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值