uniapp develops WeChat applets and uses Tencent Maps to obtain specific location information

Let me first explain why you need to use Tencent Maps to achieve automatic positioning?

uniapp can obtain user location through uni.getLocation, but the obtained location does not have a Chinese address, so we need to obtain Chinese location information through a third-party SDK such as Gaode Map or Tencent Map.
The reason why I use Tencent Maps is because I developed a WeChat applet, which belongs to Tencent, so I used Tencent Maps, hahahaha~

1. Preparations

Go to the address
The following preparatory work will roughly talk about these 4 steps.
insert image description here

1) Go to console application management ⇒ My application ⇒ Create application: as shown below
insert image description here

Click Create Application, enter the application name, and select the application type.

insert image description here
2) Click Add key in the successfully created application, check WebServiceApi, check the WeChat applet and fill in your own applet appId.
Save, and the key of your own applet will be generated.

insert image description here

3) Download the Tencent Maps Mini Program SDK:

insert image description here

4) Import code

insert image description here

2. Specific use

I used the reverse geographic analysis of Tencent Maps. For details, see reverse
geographic analysis reverseGeocoder . I put the methods related to the geographic location of the map into a unified file tool.js for easy management

//new Promise封装起来使用，避免代码多次重复

import QQMapWX from './qqmap-wx-jssdk.min.js' //引入下载的js

// 腾讯地图经纬度转中文地址
export function getAddress (lng, lat) {
    
    
  return new Promise((resove, reject) => {
    
    
    const qqmapsdk = new QQMapWX({
    
    
      key: 'VNBBZ-SKMRW-U5TR5-OIYQZ-VEOMF-IABLP',  //之前在腾讯位置服务申请的key
    })
    qqmapsdk.reverseGeocoder({
    
    
      location: {
    
    
        latitude: lat,
        longitude: lng,
      },
      success: (res) => {
    
    
        resove(res)
      },
      fail: (e) => {
    
    
        reject(e)
        // uni.showToast({
    
    
        //   title: '定位失败',
        //   duration: 2000,
        //   icon: 'none',
        // })
      },
    })
  })
}

Use on pages that use positioning

<script>
import {
    
     getAddress } from '@/utils/tool.js'
 //先获取经纬度，然后再根据经纬度通过腾讯地图获取地址名称
methods:{
    
    
 getLocation() {
    
    
      const that = this
      uni.getLocation({
    
      //只能获取到经纬度
        type: 'gcj02',
        success(res) {
    
    
          let longitude = res.longitude
          let latitude = res.latitude
          getAddress(longitude, latitude)
            .then((res) => {
    
    
              let params = {
    
    
                city: res.result.address_component.city,
                name: res.result.address_reference.landmark_l2.title,
                lng: longitude,
                lat: latitude,
              }
              that.$store.commit('setLocation', params)
              that.getGoodsList()
            })
            .catch((e) => {
    
    
              console.log(e, '解释地址失败')
            })
        },
        fail(err) {
    
    
          console.log(err, '获取经纬度失败')
        },
      })
    },
}
</script>

3. Problem summary

1) Before using uni.getLocation, you need to declare it in manifest.json, otherwise there will be the following prompt

insert image description here

Official Statement of WeChat Mini Program Geolocation Interface

Find the manifest.json file in the root directory of the uniapp project. I configured it like this
insert image description here

2) Pay attention to inaccurate positioning:

1. The default coordinate of the applet is wgs84, you need to set it to gcj02 and try again.
2. The developer tool uses the uni.getlocation method to use IP positioning. It is normal for the positioning to deviate. It will be accurate after the mobile phone test. You can try debugging and running on the real machine.

3) There are two SDKs in the WeChat Mini Program SDK v1.2 package, qqmap-wx-jssdk.js and qqmap-wx-jssdk-min.js. What is the difference between these two packages?

min.js is compressed and small in size. .js is uncompressed code, which can be used to debug problems and is larger in size.
min.js used in official projects

4. Finally

If you fail to obtain the latitude and longitude using uni.getLocation, please refer to: Reasons and solutions for the failure of the WeChat applet to obtain the geographic location

Welcome to correct~