引言

---

本文想要实现的功能：微信小程序中获取定位信息，如所在小区信息。

实现

---

index.wxml

  <view class='location' bindtap='searchAddress'>
    <image class="location_icon" src="../../images/locate.png"></image>
    <text class='location_address'>{{community}}</text>
    <image class="location_icon_more" src="../../images/more.png"></image>
  </view>

实现效果

index.wxss

.location{
  height: 55.556rpx;
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
}

.location_icon{
  width: 35rpx;
  height: 35rpx;
}

.location_icon_more{
  width: 30rpx;
  height: 30rpx;
}

.location_address{
  font-size: 18px;
}

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    community: ''
  },

  onLoad: function() {
    this.loadInfo();
  },

  loadInfo: function() {
    var page = this
    wx.getSetting({
      success: res => {
        console.info("获取用户信息 getSetting 回调结果:")
        // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope
        if (!res.authSetting['scope.userLocation']) {
          console.info("scope.userLocation")
          wx.authorize({
            scope: 'scope.userLocation',
            success() {
              // 用户已经同意小程序使用地理位置功能，后续调用 wx.getLocation接口不会弹窗询问
              console.info("index.js 授权地理位置成功")
              var i = setInterval(function() {
                wx.getLocation({
                  type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  
                  success: function(res) {
                    // success  
                    var longitude = res.longitude
                    var latitude = res.latitude
                    page.loadCity(longitude, latitude)
                    clearInterval(i)
                  },
                  fail: function() {
                    // fail  
                    console.info("loadInfo fail")
                    wx.showToast({
                      title: '手机定位未打开',
                      icon: 'warn',
                      duration: 2000 //持续的时间
                    })
                  },
                  complete: function() {
                    // complete  
                  }
                })
              }, 2000)
            }
          })
        } else
         {
          var i = setInterval(function() {
            wx.getLocation({
              type: 'gcj02 ', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  
              success: function(res) {
                // success  
                var longitude = res.longitude
                var latitude = res.latitude
                page.loadCity(longitude, latitude)
                clearInterval(i)
              },
              fail: function() {
                // fail  
                console.info("loadInfo fail")
                wx.showToast({
                  title: '手机定位未打开',
                  icon: 'warn',
                  duration: 2000 //持续的时间
                })
              },
              complete: function() {
                // complete  
              }
            })
          }, 2000)
        }
      }
    })
  },

  loadCity: function(longitude, latitude) {
    var page = this
    wx.request({
      url: app.globalData.rootUrl + '/buyer/location/getLocation?longitude=' + longitude + '&latitude=' + latitude,
      data: {},
      header: {
        'Content-Type': 'application/json'
      },
      success: function(res) {
        // success 
        console.log("成功")
        console.log(res);
        var city = res.data.result.address_component.district;
        var community = res.data.result.address_reference.landmark_l2;
        if (community == null) {
          page.setData({
            community: city
          });
        } else {
          page.setData({
            community: community.title
          });
        }
      },
      fail: function() {
        // fail  
        console.log("失败")
      },
      complete: function() {
        // complete  
      }
    })
  },

  searchAddress: function() {

  }
})

上面代码中对逆地理编码：即逆地址解析，使用的是腾讯地图开放平台

首先得申请key:

申请key

• 腾讯地图开发文档：逆地址解析(坐标位置描述)

可以看出小程序端若是直接访问https://apis.map.qq.com/ws/geocoder/v1/是不被允许的，小程序端只能访问指定自己的服务器域名，因此将逆地址解析的事情放到服务器端。

Java Springboot 项目部分代码

/**
 * RestTemplate配置类
 * RestTemplateConfig
 */
@Component
public class RestTemplateConfig {

    @Bean
    public RestTemplate restTemplate(ClientHttpRequestFactory factory){
        return new RestTemplate(factory);
    }

    @Bean
    public ClientHttpRequestFactory simpleClientHttpRequestFactory(){
        SimpleClientHttpRequestFactory factory = new SimpleClientHttpRequestFactory();
        factory.setReadTimeout(5000);//ms
        factory.setConnectTimeout(15000);//ms
        return factory;
    }

}

/**
 * BuyerLocationController
 */
@RestController
@RequestMapping("/buyer/location")
@Slf4j
public class BuyerLocationController {

    @Autowired
    private RestTemplate restTemplate;

    @RequestMapping("/getLocation")
    public String getLocation(@RequestParam("longitude") String longitude, @RequestParam("latitude") String latitude) {
        String url = "https://apis.map.qq.com/ws/geocoder/v1/?location="+latitude+","+longitude+"&key=QTDBZ-XXXXX-77PVR-XXXXX-JSY3O-XXXXX&get_poi=1";
        String json = restTemplate.getForEntity(url, String.class).getBody();
        log.info("返回结果："+json);
        return json;
    }
}