获取当前的定位城市，获取实时天气信息(vue uniapp应该都可以)

本文链接：https://blog.csdn.net/Red_sevenWord/article/details/135019087

本文介绍了如何通过使用腾讯地图API获取用户当前位置，并结合和风天气API获取更精确的天气信息，以替代基于IP地址的不准确方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取定位城市

因为之前项目使用获取天气的api是通过ip所在城市来的，所以有时候不太准确，故改用城市名称或经纬度获取天气。使用的天气api是和风天气。和风天气

获取当前城市信息

先注册腾讯地图 https://lbs.qq.com/,创建应用拿到所需的key

获取当前城市信息代码

		<iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
		    src="https://apis.map.qq.com/tools/geolocation?key=PZOBZ-EHH6J-DEMFD-DFPL7-UN27S-M5FZT&referer=myposition">
		</iframe>

代码复制到页面中
在这里插入图片描述

	mounted() {
		this.getAddress()
	},

methods

		getAddress(){
		var that = this;
			window.addEventListener('message', function(event) {
			    // 接收位置信息
			    var loc = event.data;
			    console.log('location', loc);
			    that.getWeather(loc)
			}, false);
		},

搞定地址

在这里插入图片描述

然后是天气

注册和风天气创建应用拿到需要的key，然后看文档
在这里插入图片描述
请求url
https://api.qweather.com/v7/weather/now?{请求参数}

		getWeather(loc){
			uni.request({
			  //和风天气api
				url: `https://devapi.qweather.com/v7/weather/now?location=${loc.lng},${loc.lat}&key=c183d12a588840cfa6e0e0bbd06da575`,
				success: data => {
					console.log('now',data.data.now);
				}
			});
		  },