地区天气（和风天气）

通过和风天气接口获取天气

和风天气开发服务 ~ 强大、丰富的天气数据服务

这个是花钱的，但是有免费次数

先登录申请key，还需申请腾讯的key（因为我是通过ip获取城市码）

注册在index中

  <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /><link rel="stylesheet" type="text/css" href="./static/css/iconfont.css"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qweather-icons@1.3.0/font/qweather-icons.css">

使用腾讯公共接口根据IP获取所在城市（可以是区县），我是http所以需要跨域

    var data = {key: "", //腾讯key};var url = "https://apis.map.qq.com/ws/location/v1/ip"; //腾讯地理位置信息接口data.output = "jsonp"; // 解决跨域问题var that = this;this.$jsonp(url, data).then((res) => {console.log("IP所在市", res.result.ad_info);if (res.result.ad_info.district != "") {this.cityName = res.result.ad_info.district;} else {this.cityName = res.result.ad_info.city;}fetch("https://devapi.qweather.com/v7/weather/now?location=" +res.result.location.lng +"," +res.result.location.lat +"&key="//和风天气key,{type: "get",dataType: "json",}).then((response) => {if (response.ok) return response.json();}).then((data) => {console.log(data, "和风天气----->>>");that.weatherName = data.now.text;that.weathericon = "qi-" + data.now.icon + "-fill";});}).catch((error) => { });

获取到数据以后

    <i :class="weathericon" class="weathericon" style=""></i><div style="font-size: 12px">{{ cityName }}&nbsp;&nbsp;&nbsp;&nbsp;{{ weatherName }}</div>

  .weathericon {background-image: -webkit-linear-gradient(top left,#63a3ff,#b6dcff,#72beff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 1.3rem;width: 85px;}

地区天气（和风天气）相关推荐

php解析和风天气api,API爬取天气预报数据
API爬取天气预报数据 """ 该网站为个人开发者提供免费的天气预报数据,自行访问官网注册,在控制台看到个人的key. 然后看API文档,基本可以开发了,有访问次数限制. ...
使用和风天气 API 10分钟搭建天气预报数据看板
本文首发:<使用和风天气 API 10分钟搭建天气预报数据看板)> 使用和风天气 API 10分钟搭建天气预报数据看板第 1 步:注册和风天气 API 及卡拉云 (1)注册和风天气 AP ...
微信小程序开发--利用和风天气API实现天气预报小程序
本来是参照<微信小程序开发实战>做一个天气预报小程序的,实际运行的时候提示错误,code 400,参数错误.说明问题应该出在查询API的语句上,没有返回结果. 查阅后才知道,可能书籍出版时 ...
Android使用高德和风天气Sdk获取定位实况天气数据（二）
Android使用高德和风天气Sdk获取定位实况天气数据(二) 先看一下效果关于实现第一步,引用高德api与和风天气第二步,修改AndroidManifest.xml 第三步,修改activi ...
Android使用高德与和风天气实现定位实况数据显示简易新闻（十）
Android使用高德与和风天气实现定位实况数据显示简易新闻(十) 关于效果图第一步,添加和风引用第二步,修改AndroidManifest.xml 第三步,修改activity_main.x ...
Android开发之和风天气篇：1、获取天气信息
TIME:2020年7月6日 :1.获取天气信息和风天气API使用方法: step1 申请天气接口 step2 天气接口初始化 step3 选择服务模式 step4 通过URL请求数据 step5解 ...
华美天气（数据来源：和风天气 API）
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
智能家居--domoticz配置和风天气 HTTP/HTTPS poller 的使用以及domoticz_updateDevice的介绍
继续填坑,domoticz默认的 darksky 貌似是要停运了,所以准备将domoticz的天气信息换成和风天气的 1. 使用浏览器拿到需要的数据首先建议你去获取一个开发者账号(需要实名) ,因 ...
domoticz添加和风天气与彩云天气
上一次我在domoticz中嵌入和风api H5页面,是因为和风api的json格式解析不对,但是我不死心,今天终于弄明白了!!,在这里记录一下. 和风天气API格式彩云天气API格式分别在dom ...

地区天气（和风天气）

地区天气（和风天气）相关推荐

最新文章

热门文章