引言
本文想要實現(xiàn)的功能：微信小程序中獲取定位信息俐芯，如所在小區(qū)信息掀宋。
實現(xiàn)
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>
實現(xiàn)效果
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 回調(diào)結果:")
// 可以通過 wx.getSetting 先查詢一下用戶是否授權了 "scope.userLocation" 這個 scope
if (!res.authSetting['scope.userLocation']) {
console.info("scope.userLocation")
wx.authorize({
scope: 'scope.userLocation',
success() {
// 用戶已經(jīng)同意小程序使用地理位置功能营密，后續(xù)調(diào)用 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 //持續(xù)的時間
})
},
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 //持續(xù)的時間
})
},
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
- 騰訊地圖開發(fā)文檔：逆地址解析(坐標位置描述)
可以看出小程序端若是直接訪問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;
}
}
