获取地区天气

news2024/12/28 10:34:47

上网找了半天js获取天气的方法，试了好几个都不行，还是得用api才行
1.用的心知天气的api
很简单,注册就能用,调用api需要key,官方网站：https://gaofen.mlogcn.com/documentation/0/00

2.areacode
这个网页里面找精确到县：https://blog.csdn.net/WXB_gege/article/details/106853189

备用：https://blog.csdn.net/Web_Notes/article/details/134581398?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22134581398%22%2C%22source%22%3A%22Web_Notes%22%7D
效果图：
在这里插入图片描述

完成代码：


<template>
  <div class="weather_font">
    <span>{{weather}}&nbsp;&nbsp;</span>
    <span>{{temp}}℃&nbsp;&nbsp;</span>
    <span>{{wind}}</span>
    </div>
</template>
<script>
//import axios from "axios";
export default {
  data() {
    return {
      weather: '',
      temp: '',
      wind: '',
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      let key = "xxxx";//心知天气key
      let code = "101271617";//l雷波
      let url = `https://gfapi.mlogcn.com/weather/v001/now?areacode=${code}&key=${key}`;

      fetch(url)
        .then((res) =>
          res.json().then((data) => {
            let nData=data.result.realtime
            this.weather=nData.text
            this.temp=nData.temp
            this.wind=nData.wind_dir+nData.wind_class
          })
        )
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style>
.weather_font {
font-size: 14px;
color: #32F0EE;
}
</style>