js获取地区天气

上网找了半天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>

猜你喜欢

转载自blog.csdn.net/Web_Notes/article/details/134581109