uni多端(H5和微信小程序)获取经纬度以及位置信息(当前城市)

1.首先使用uni.getlocation获取到当前的经纬度信息

uni.getlocation开发者文档

封装uni.getlocation

// 获取当前经纬度位置promise封装
const getMyLocation = function() {
	let promise = new Promise((resolve, reject) => {
		uni.getLocation({ //获取当前的位置坐标
			type: 'wgs84',
			success: function(res) {
				// console.log(res)
				resolve({
					longitude: res.longitude,
					latitude: res.latitude
				})
				// console.log('当前位置的经度：' + res.longitude);
				// console.log('当前位置的纬度：' + res.latitude);
			},
			fail: (err) => {}
		});
	})
	return promise
}

2.微信小程序端

腾讯地图微信小程序JavaScript SDK开发者文档

1. 注册腾讯地图开发者并填写开发者相关信息 https://lbs.qq.com/
2. 申请开发者密钥（key），绑定小程序appid
3. 开通webserviceAPI服务
4. 下载微信小程序JavaScriptSDK，1.1或者1.2都可以，解压然后随便创建一个文件夹丢进入，我是直接在根目录创建了一个lib文件夹
5. 小程序安全域名设置（须在微信小程序开发设置中进行配置）
   
6. 配置完成之后首先要将我们刚才下载下来的JavaScriptSDK引入到我们封装方法的地方，然后再使用在第一步中获取到的经纬度信息，使用腾讯官方提供的逆地址解析服务进行经纬度逆解析
   因为我是有一个专门封装方法的文件，所以直接引入就OK了
   
7. 然后就是将这个方法直接封装起来了

// 根据经纬度获取当前城市信息腾讯地图
const TencentGetLocalCity = function(latitude, longitude) {
	console.log(latitude, longitude)
	return new Promise((resolve, reject) => {
		var that = this;
		var map = new TencentMap({
			key: '' // 此处填写申请下来的开发者密钥key
		})
		// 通过这个方法来实现经纬度反推省市区
		map.reverseGeocoder({
			location: {
				latitude: latitude,
				longitude: longitude
			},
			success: function (res) {
				// console.log('腾讯获取城市名', res)
				resolve(res.result)
			}
		})
	})
}

3.H5端

H5端腾讯地图开发者文档
注意H5端编译时若使用的谷歌最新款浏览器可能会出现获取不到经纬度的情况，建议在调试H5端的时候使用其他浏览器

1. 因为H5端编译至浏览器后会存在跨域问题，所以我们需要先解决跨域问题，现在根目录中找到manifest.json文件，然后选择最后一项源码视图，找到最后H5配置，将腾讯接口进行跨域代理(使用HBuilder X内部浏览器不会出现跨域问题)
   

"h5" : {
        "router" : {
            "mode" : "hash"
        },
        "devServer" : {
            "https" : false,
            "port" : 8080,
            "disableHostCheck" : true,
            "proxy" : { // 可代理多个
                "/TencentGet" : {
                    "target" : "https://apis.map.qq.com/ws/geocoder/v1/", // 腾讯地图逆地址解析
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/TencentGet" : ""
                    }
                }
            }
        }
    }

2.使用uni.request请求数据并封装方法

// 根据经纬度获取当前城市信息腾讯地图
const TencentGetLocalCity = function(latitude, longitude) {
	console.log(latitude, longitude)
	// 存在跨域需要在manifest中代理一下
	let baseUrl = `/TencentGet/?location=${latitude},${longitude}&key=此处填写开发者密钥key`
	// console.log(url)
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl,
			method: 'GET'
		}).then(res => {
			// console.log(res[1].statusCode)
			// console.log(res[1].data.result)
			resolve(res[1].data.result)
		}).catch(err => {
			
		})
	})
}

4.条件编译整合

import TencentMap from "../lib/qqmap-wx-jssdk.min.js"
// 根据经纬度获取当前城市信息腾讯地图,小程序和H5各一套
const TencentGetLocalCity = function(latitude, longitude) {
	console.log(latitude, longitude)
	// 只编辑H5
	// #ifdef H5
	// 存在跨域需要在manifest中代理一下
	let baseUrl = `/TencentGet/?location=${latitude},${longitude}&key=此处填写开发者密钥key`
	// console.log(url)
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl,
			method: 'GET'
		}).then(res => {
			// console.log(res[1].statusCode)
			// console.log(res[1].data.result)
			resolve(res[1].data.result)
		}).catch(err => {
			
		})
	})
	// #endif
	// 除H5之外
	// #ifndef H5
	return new Promise((resolve, reject) => {
		var that = this;
		var map = new TencentMap({
			key: '' // 此处填写申请下来的开发者密钥key
		})
		// 通过这个方法来实现经纬度反推省市区
		map.reverseGeocoder({
			location: {
				latitude: latitude,
				longitude: longitude
			},
			success: function (res) {
				// console.log('腾讯获取城市名', res)
				resolve(res.result)
			}
		})
	})
	// #endif
}