WeChat applet - get user location (latitude and longitude + city)
Article Directory
1. Goals
Get the user's city
2. Implementation ideas
1. Use the interface function of the WeChat applet to obtain the latitude and longitude of the user's location
2. Inversely parse the latitude and longitude into a structured text address
3. Extract the required address structure components according to the structured text address, such as provinces, cities, districts and counties, etc.
3. Implementation steps
3.1 Interface functions used
WeChat applet - interface function to obtain user location: wx.getLocation(Object object)
You also need to use the applet configuration: permission
Tencent location service - reverse geocoding (coordinate location description) interface function: reverseGeocoder(options:Object)
3.2 Specific steps
3.2.1 Create interface
wxml file
<view class="view1">点击获取用户位置</view>
<view class="view2">用户所在位置的经度：{
{latitude}}</view>
<view class="view2">用户所在位置的纬度：{
{longitude}}</view>
<view class="view2">用户所在城市：{
{city}}</view>
wxss file
.view1 {
background-color: yellow;
width: 100%;
height: 200rpx;
margin-bottom: 20rpx;
}
.view2 {
background-color: yellow;
width: 100%;
height: 100rpx;
margin-bottom: 20rpx;
}
js file
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
latitude: null,
longitude: null,
city: null
},
onLoad() {
},
})
interface effect
3.2.2 Get the latitude and longitude of the user's location
Write the function getLocation that triggers the acquisition of the latitude and longitude of the user's location, call the wx.getLocation interface in the function, obtain information such as longitude and latitude, and then bind it to the front-end interface.
3.2.2.1 Configure permission in the app.json file
When the user uses this function for the first time, the applet asks the user whether to authorize access to the user's location information. Do not ask again after that. (After clearing the cache of developer tools and recompiling the applet, it will ask again, because the authorization information of the previous user has been cleared)
app.json file
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
//新增下面的代码（上面的代码是创建小程序项目后就已经有的）
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
3.2.2.2 Call wx.getLocation interface
wxml file
//新增bindtap这个函数，使得用户点击这个view时就能触发获取用户位置的功能
<view class="view1" bindtap="getLocation">点击获取用户位置</view>
js file
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
latitude: null,
longitude: null,
city: null
},
onLoad() {
},
// 新增下面这部分代码
getLocation() {
var that = this;
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
console.log(res) //将获取到的经纬度信息输出到控制台以便检查
that.setData({
//将获取到的经度、纬度数值分别赋值给本地变量
latitude: res.latitude,
longitude: res.longitude
})
}
})
}
})
Effect
3.2.3 Get the user's city
3.2.3.1 Configurations other than applets
Apply for a key in Tencent location service
Complete the following steps according to the instructions in [Getting Started and Usage Restrictions] in Tencent Location Services - WeChat Mini Program Javascript Development Guide .
Download applet JavaScriptSDK
Just download it from the Tencent location service website (choose one of the two, I downloaded v1.2), and save it to the WeChat applet project directory.
Extract the downloaded compressed package to the current folder.
Security Domain Name Settings
Log in to the public platform of the WeChat applet , use the appid of this applet (or the test number of your own WeChat account) to log in, and configure the legal domain name of the request in the "server domain name": https://apis.map.qq.com.
3.2.3.2 Call reverseGeocoder interface
js file
// index.js
// 获取应用实例
const app = getApp()
//新增
// 引入SDK核心类，根据自己放的路径来写这个SDK核心类的位置
var QQMapWX = require('../../qqmap-wx-jssdk.js');
//新增
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '……' // 必填，填自己在腾讯位置服务申请的key
});
Page({
data: {
latitude: null,
longitude: null,
city: null
},
onLoad() {
},
getLocation() {
var that = this;
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
console.log(res)
that.setData({
latitude: res.latitude,
longitude: res.longitude
})
//新增
qqmapsdk.reverseGeocoder({
//位置坐标，默认获取当前位置，非必须参数
//Object格式
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function(res) {
//成功后的回调
console.log(res.result.ad_info.city);
that.setData({
city: res.result.ad_info.city
})
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
})
}
})
}
})
Effect
