小程序获取用户所在城市————（2020.1.15学习笔记）
首先要弄清楚的是，微信小程序是没有城市定位api的，只有经纬度定位api，但出于弥补，可以在小程序开发工具设置中开通腾讯位置服务（如下图）
开通之后，就可以将小程序定位用户的经纬度传给腾讯位置服务的接口，然后腾讯的定位服务将会返回用户所在城市，所以，先要实现小程序定位用户经纬度功能，在实现这个功能之前，由于需要获取用户位置权限，则必须申请权限（申请权限代码如下）
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
申请完之后，声明几个全局变量，用来存储用户城市名称（代码如下）
globalData: {
province: '',
city: '',
}
为了能在当前页面也能显示用户城市，所以也在当前页面声明几个变量，用来存储用户城市名称
data: {
province:'',
city:''
},
然后，再声明一个函数，在函数内调用qqmapsdk.reverseGeocoder显示当前经纬度所属的城市，并将城市名存储到预先声明好的全局变量和当前页面的变量中（代码如下）
var app = getApp();
var QQMapWX = require('../../My_Libs/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: 'SS6BZ-MCRKU-RF6V7-2C66O-ONBAF-H4BPZ' // 必填
});
getUserCityName(latitude,longitude)//获取所在城市
{
let Container=this;
qqmapsdk.reverseGeocoder(
{
location:{
latitude: latitude,
longitude: longitude
},
success(res)
{
let province =res.result.ad_info.province
let city=res.result.ad_info.city
app.globalData.province=province
app.globalData.city=city
app.globalData.latitude=latitude
app.globalData.longitude=longitude
Container.setData(
{
province:app.globalData.province,
city:app.globalData.city
}
)
},
fail(res)
{
console.log(res);
},
complete(res)
{
console.log(latitude);
console.log(longitude);
console.log(res);
}
}
)
},
接下来，再声明一个函数，再函数内调用wx.getLocation获取用户经纬度，并将经纬度传给定位城市的函数（代码如下）
getUserPosition()//获取用户经纬度
{
let Container=this;
wx.getLocation({
type:'wgs84',
success(res)
{
var latitude = res.latitude
var longitude = res.longitude
Container.getUserCityName(latitude,longitude)
}
})
},
然后将此函数在页面onShow函数中调用，确保页面在启动时就能获取用户的所在位置（代码如下）
onShow: function () {
this.getUserPosition()
},
最后，为了能展示效果，这里在页面声明了组件，并将页面存储城市名称的变量传入到组件中（代码如下）
<view class="WelCome_Header">
<image src="/My_Image/AppIcon_Image/View_Sky_100.png"></image>
</view>
<view class="WelCome_Tail">
<view><text>{{province}}{{city}}</text></view>
</view>
总体在JS上的代码（如下）
// pages/Page_Welcome/Page_WelCome.js
var app = getApp();
var QQMapWX = require('../../My_Libs/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: 'SS6BZ-MCRKU-RF6V7-2C66O-ONBAF-H4BPZ' // 必填
});
Page({
/**
* 页面的初始数据
*/
data: {
province:'',
city:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getUserPosition()
},
getUserPosition()//获取用户位置
{
let Container=this;
wx.getLocation({
type:'wgs84',
success(res)
{
var latitude = res.latitude
var longitude = res.longitude
Container.getUserCityName(latitude,longitude)
}
})
},
getUserCityName(latitude,longitude)//获得用户所在城市
{
let Container=this;
qqmapsdk.reverseGeocoder(
{
location:{
latitude: latitude,
longitude: longitude
},
success(res)
{
let province =res.result.ad_info.province
let city=res.result.ad_info.city
app.globalData.province=province
app.globalData.city=city
app.globalData.latitude=latitude
app.globalData.longitude=longitude
Container.setData(
{
province:app.globalData.province,
city:app.globalData.city
}
)
},
fail(res)
{
console.log(res);
},
complete(res)
{
console.log(latitude);
console.log(longitude);
console.log(res);
}
}
)
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
实现的效果图（如下）
