Table of contents
1. Configure the WeChat applet JavaScript SDK in Tencent Location Services
2. Use uni-app to get the latitude and longitude of the positioning
3. Reverse address resolution to obtain precise positioning
foreword
Show results
1. Configure the WeChat applet JavaScript SDK in Tencent Location Services
Search for Tencent Location Services in the browser, find the official website, register and log in with WeChat or other accounts, and operate as shown below after logging in
After clicking in, you can see the operation instructions in the red box as shown below
The first and second steps are mainly to apply for a secret key and configure services. You can directly click on my application to jump, and then operate as shown in the following picture
After successful creation, there will be the following pictures
Click Add Key, then configure
If the configuration is successful, you will get the Key
The third step is to download one of the WeChat applet JavaScriptSDK v1.1 JavaScriptSDK v1.2 , then unzip the file, put it into the project, I put it in my common component
The fourth step can be ignored. The fifth step is to import the file to the page where you want to display the positioning, and introduce the applied Key into the onLoad life cycle.
var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js');
this.qqmapsdk = new QQMapWX({
key: '3SUBZ-W5BCQ-FLM5G-GYOPG-D523V-DUFNH'
});2. Use uni-app to get the latitude and longitude of the positioning
Find location in uni-app's API
Put the following code into the mounted life cycle to get the latitude and longitude
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
}
});Here you also need to add a piece of code to configure permissions in the source view in manifest.json
"permission" : {
"scope.userLocation" : {
"desc" : "获取当前定位"
}
} 
3. Reverse address resolution to obtain precise positioning
Call the method of qqmapsdk.reverseGeocoder, and call the latitude and longitude in the attribute location. Note that gcj02 needs to be used here.
Receive the call result through the callback parameters of the attributes success, fail, and complete. There can be two callback parameters for success. The first parameter receives the call result, and the second parameter controls the returned processed data (optional parameter). Example: success :function(res,data)
address is defined as empty by itself to receive the address, req has the following content
address can be req.result.address as long as the location is obtained
mounted() {
uni.getLocation({
type: 'gcj02',
highAccuracyExpireTime: 100,
success: (res => {
this.qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success:(req=>{
this.address = req.result.address
console.log(this.address);
})
})
})
});
},Finally, you can render the address on the page
In the code segment, highAccuracyExpireTime: 100, is the high-precision positioning timeout (ms), and returns the highest accuracy within the specified time. The value of 3000ms or more is effective for high-precision positioning, which can be written or not.
4. Tips
If the positioning effect cannot appear, you need to reduce the version of the debug base library
Closing remarks:
The above is all the content shared this time, if you have any questions, you can privately message me
