The uniapp WeChat applet obtains current location information, latitude and longitude conversion, and realizes navigation maps

1. Call the interface, the official website document is written like this

uni.getLocation({
	type: 'wgs84',
	success: function (res) {
		console.log('当前位置的经度:' + res.longitude);
		console.log('当前位置的纬度:' + res.latitude);
	}
});

2. Convert latitude and longitude into location information

Tencent location service needs to be activated, and developers have 10,000 free conversions per day. Open address

 Remember the key value of the current application, and then download the WeChat applet JavaScriptSDK

Then set the security domain name, set the legal domain name of the request in the applet management background  -> development -> development management -> development settings -> "server domain name", add https://apis.map.qq.com

5. At this time, come to the applet and define a global variable var qqmapsdk for this page;

6. Import the js file just downloaded in onLoad, and create this object with global variables.

7. Use the local variable .reverseGeocoder to convert the latitude and longitude into corresponding information.

<script>
	import QQMapWX from '../../common/qqmap-wx-jssdk.js'
	//全局变量
	var qqmapsdk;
	export default {
		data() {
			return {
				address: '',
				latitudeL: '',
				longitude: '',
			}
		},
		methods: {
			
		},
		onLoad(option) {
			const that = this
			console.log(33,that)
			var QQMapWX = require('../../common/qqmap-wx-jssdk')
			var qqmapsdk = new QQMapWX({
				key: 'PRGBZ-G7UHT-LBEXI-VESDI-EVUUS-HDF3Q' // 必填
			})
			wx.getLocation({
				type: 'wgs84',
				success(res) {
					console.log('纬度', res.latitude, '经度', res.longitude)
					wx.setStorageSync('latitude', res.latitude)
					wx.setStorageSync('longitude', res.longitude)
				},
				//wx.getLocation  回调里面把上面获取到的经纬度给引入的qqmap-wx-jssdk就可以获取到对应的地点了
				complete() {
					// 坐标转换
					qqmapsdk.reverseGeocoder({
						// 位置坐标,默认获取当前位置,非必须参数
						location: {
							latitude: wx.getStorageSync('latitude'),
							longitude: wx.getStorageSync('longitude')
						},
						success: function(res) {
							console.log(11,res.result.address_component.city)
							that.address = res.result.address_component.city
							console.log(22,that.address)
							wx.setStorageSync('address_component', res.result.address_component.city)
						},
						fail: function(error) {
							console.error('错误了', error)
						}
					})
				}
			})
		}
	}
</script>

Then the most important thing is that you have to go to the WeChat public platform to apply for a small program interface

Application address

Guess you like

Origin blog.csdn.net/weixin_67434908/article/details/129843210