[Mini program] WeChat mini program obtains user location, latitude and longitude and reverse address resolution


Preface

When targeting the mini program, you need to obtain the user's location. Uniapp has its own method of obtaining the location, uni.getLocationwhich can obtain the longitude and latitude, as well as the Chinese address address. However, the Chinese address is only supported by the APP and cannot be used by the mini program. Now we can only get the longitude and latitude, and then use the reverse address resolution of the longitude and latitude to get the Chinese address.


提示:以下是本篇文章正文内容,下面案例可供参考

1. Obtain latitude and longitude

There are many ways to obtain latitude and longitude:

  1. uniapp can be obtained through uni.getLocation
  2. wx.getLocationGet
  3. Third-party api/sdk acquisition

1. You need to declare the interface you need to use in app.json

Declare in uniapp’s manifest.json源码视图

If you do not declare it, you cannot use the interface normally. For more interface declarations, you can check WeChat official rules .

"requiredPrivateInfos": [
	    "getLocation"
	  ],

Note: If the mini program is launched, you need to apply in advance for permission to use the interface and only provide permissions to some subjects. Otherwise, the official application on WeChat will not be approved for review.

2. Pay attention to protecting the user's privacy. The user's location can only be obtained after the user's authorization. If the user refuses, it will not be obtained.
Configure prompts for obtaining user positioning permissions in app.json:

"permission": {
    
    
	    "scope.userLocation": {
    
    
	      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 定位
	    }
	  },

3. Determine whether the user has authorized positioning. If not authorized, a prompt to obtain positioning permission will pop up. You can get the wx.getSettinguser's authorization information. If there is no authorization, an authorization request will pop up. The user can refuse. If the user has authorized it before, the request will not pop up. Return directlysuccess

/**
 * 获取定位授权
 * author: xjw
 */
	wx.getSetting({
    
    
		success(res) {
    
    
			if (!res.authSetting['scope.userLocation']) {
    
    
				wx.authorize({
    
    
					scope: 'scope.userLocation',
					success() {
    
    
						// 用户已授权位置权限
						// 可以继续访问位置信息
					},
					fail() {
    
    
						// 用户拒绝了位置权限
						// 可以相应地处理拒绝情况
						console.log("用户拒绝了位置权限")
					},
				});
			} else {
    
    
				// 用户已经授权了位置权限
				// 可以继续访问位置信息
				console.log("用户已经授权了位置权限")
			}
		},
	});
}

4. Get the latitude and longitude
by wx.getLocationgetting the user’s latitude and longitude

wx.getLocation({
    
    
	type: 'wgs84',
	success: function(res) {
    
    
		console.log('用户已授权位置权限,经纬度:' + res.longitude, res.latitude);
	},
	fail: function() {
    
    
		console.log("获取地理位置失败")
	}
})

2. Reverse address resolution

The small program wx.getLocation can only obtain the latitude and longitude. If you want a specific address, you need to use a third-party API (reverse address resolution). The third party here uses Tencent location service as an example.

1. Apply for API Key

Now register for Tencent Maps and get the key
https://lbs.qq.com/dev/console/key/manage
Insert image description here

2.Use WebService API

After obtaining the api key, you can use the API

wx.request({
    
    
		url: 'https://apis.map.qq.com/ws/geocoder/v1/',
		data: {
    
    
			location: `${
      
      latitude},${
      
      longitude}`,
			key: 'API_KEY',
			get_poi: 0,
			output: 'json'
		},
		success(res) {
    
    
			var address = res.data.result.address;
		},
		fail(error) {
    
    
			console.error('逆地理编码失败:', error);
		}
	});

The data requested by the url network used here. Receive parameters latitude and longitude.
The returned res.data.result.address contains the parsed Chinese address.


Guess you like

Origin blog.csdn.net/m0_71621983/article/details/132210196