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

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

获取定位城市

因为之前项目使用获取天气的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({//和风天气apiurl: `https://devapi.qweather.com/v7/weather/now?location=${loc.lng},${loc.lat}&key=c183d12a588840cfa6e0e0bbd06da575`,success: data => {console.log('now',data.data.now);}});},