uniapp微信获取位置，具体城市信息

喜欢ヅ旅行 2022-10-12 04:22 327阅读 0赞

## 我们在小程序以及app内经常会一进入就获取当前城市，只用uniapp的getlocation只能获取到经纬度，那么如何通过经纬度获取当前位置呢（文章中使用腾讯地图） ##

## 一.在项目的mainfest.json中找到配置位置的地方（小程序） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70]

## 二.使用uni.getlocation方法获取到当前的经度以及纬度。 ##

uni.getLocation({
        success: (res) => {
          console.log(res);
          this.latitude=res.latitude;			//获取到的纬度
          this.longitude =res.longitude;		//获取到的经度
        },
        fail:(res)=>{
          uni.showToast({
            title:'获取位置信息失败',
            icon:'none'
          })
        }
      })

## 三.引入腾讯地图的sdk ##

https://lbs.qq.com/mobile/androidLocationSDK/androidGeoDownload  注册腾讯地图获取到免费的key值，下载js至项目中

![在这里插入图片描述][20210703155944669.png]  
在需要使用的页面引入js  
![在这里插入图片描述][2021070316012285.png]  
key内填写腾讯地图申请的key值

## 四.使用腾讯地图获取当前具体位置信息 ##

QQMapWX.reverseGeocoder({
                location: {
                  latitude: this.latitude,
                  longitude: this.longitude
                },
                success: (res) => {
                  var cityName = res.result.address_component.city;		//获取到的城市名
                  console.log(res);
                }
              })

这样就获取到了位置信息
      
      
    获取地址的完整代码：
    onShow() {
      uni.getLocation({
        success: (res) => {
          console.log(res);
          var latitude=res.latitude;
          var longitude =res.longitude;
          QQMapWX.reverseGeocoder({
            location: {
              latitude: latitude,
              longitude: longitude
            },
            success: (res) => {
              var cityName = res.result.address_component.city;
              this.cityName=cityName ;
              console.log(res);
            }
          })
        },
        fail:(res)=>{
          uni.showToast({
            title:'获取位置信息失败',
            icon:'none'
          })
        }
      })
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70]: /images/20221005/fe6e3921d4ad4c0b8f591cc1c2844e8e.png
[20210703155944669.png]: /images/20221005/d18f66fab59c4d4d941a3985d6a1fb0a.png
[2021070316012285.png]: /images/20221005/e0c3aeea47c94bc3a4baf035ac82b9e7.png