微信小程序开发之获取当前位置所在的城市

╰半夏微凉° 2022-09-07 15:50 419阅读 0赞

> 由于微信小程序只提供了获取地理位置（经纬度）、速度的api，并没有获取地理位置的信息。因此，我们需要利用第三方地图api来解决这个问题。

**一、原理**  
通过调用wx.getLocation()获取到设备当前所在地理位置的经纬度。再申请一个第三方地图api的ak（访问应用），然后通过ajax请求把ak和经纬度传给第三方服务端，该服务端返回地理位置信息（如广东省广州市白云区）。

**二、效果图**

![92e6caf00c4652563fed12925ea6f78e.gif][]

**三、实现过程**  
这里使用了百度地图的api，进入[百度地图开发平台][Link 1]，创建一个应用，申请一个ak

然后调用wx.getLocation()获取到设备当前的经纬度。然后用ajax把ak和经纬度(lat<纬度>,lng<经度>)传给百度地图服务端即可。

getCity: function(e) {
        var that = this;
        console.log(e);
        //返回true和false
        console.log(e.detail.value);
        //选中状态
        if (e.detail.value){
          wx.showLoading({
            title: '加载中',
          });
          wx.getLocation({
            success: function (res) {
              console.log(res);
              console.log(res.latitude);
              console.log(res.longitude);
              const url= 'http://api.map.baidu.com/geocoder/v2/';
              const ak = '填上自己申请的ak';
              //小程序的ajax请求需要在后台安全域名配置增加 开发测试中在详情里勾选-不校验合法域名即可
              wx.request({
                url,
                data: {
                  ak,
                  location: `${res.latitude},${res.longitude}`,
                  output: 'json',  //格式
                },
                success: function (res){
                  console.log(res);
                  if(res.data.status == "0"){
                    that.setData({
                      province: res.data.result.addressComponent.province,
                      city: res.data.result.addressComponent.city,
                      district: res.data.result.addressComponent.district,
                      isShow: true
                    });
                    wx.hideLoading()
                  }else{
                    that.setData({
                      unGeo: '未知位置',
                      isShow: false
                    });
                    wx.hideLoading()
                  }
                }
              })
            }
          })
        }
    }

好了，很简单的一个案例~

作者：毕竟1米八  
链接：https://www.jianshu.com/p/f531124f03fa  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[92e6caf00c4652563fed12925ea6f78e.gif]: /images/20220829/4e08b00962c147faba8742865cf7ac77.png
[Link 1]: http://lbsyun.baidu.com