vue网页中的一个天气组件使用高德api

今天写了一个天气组件效果如下：

实现代码如下：

<template>
    <div>
      <span @click="getLocation" style="cursor: pointer">
        <span style="color:white;">{{ weatherInfo.area }}</span>
      </span> |
      <span style="color:white;">{{ weatherInfo.weather }}</span>
      
      <span style="color:white;font-weight: bold;">{{ weatherInfo.temperature }}°C</span> |
      <span style="color:white;">{{ weatherInfo.wind_direction }}</span>
      <span style="color:white;">{{ weatherInfo.wind_power }}</span>
      <!-- <img style="width:30px;vertical-align: middle;" :src="weatherInfo.weather_pic"/> -->
      <div v-if="isLoading" class="loading">加载中...</div>
      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    </div>
  </template>

<script>
import {onLoad} from 'vue'
import axios from 'axios'
export default {
    data() {
        return{
            weatherInfo: {
                area: '郑州市',
                temperature: '34',
                weather: '多云',
                weather_pic: 'http://tianqiapi.com/static/img/icon/duoyun.png',
                wind_direction: '南风',
                wind_power: '3级',
                quality: '良'
            },
            errorMessage:'',
            isLoading:false
        };
    },
    created(){
        console.log('[DEBUG] 组件已挂载');
        this.getLocation();
    },
    methods: {
      async getLocation() {
        console.log('GetLocation');
           try {
                console.log('[DEBUG] 开始定位');
                const response = await axios.get('https://restapi.amap.com/v3/ip', {
                params: { key: 'your gaode api key' }
                });
                
                if (response.data.status === '1') {
                await this.getWeathData(response.data.city, response.data.adcode);
                } else {
                throw new Error(`定位失败: ${response.data.info}`);
                }
            } catch (error) {
                console.error('[ERROR] 定位异常:', error);
                this.errorMessage = '定位服务不可用';
                this.isLoading = false;
            }
        },
       async getWeathData(cityName, cityCode) {
            try {
                this.isLoading = true;
                const { data } = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo', {
                params: {
                    key: 'your gaode api key',
                    city: cityCode,
                    extensions: 'base',
                    output: 'JSON'
                }
                });

                if (data.status === '1' && data.lives?.length > 0) {
                const weatherData = data.lives[0];
                // 安全更新数据
                this.weatherInfo = {
                    area: weatherData.city || cityName,
                    temperature: weatherData.temperature || '--',
                    weather: weatherData.weather || '未知',
                    wind_power: weatherData.windpower ? `${weatherData.windpower}级` : '--',
                    wind_direction: weatherData.winddirection ? `${weatherData.winddirection}风` : '--'
                };
                } else {
                throw new Error(data.info || '天气数据异常');
                }
            } catch (error) {
                console.error('[ERROR] 天气获取失败:', error);
                this.errorMessage = '天气数据获取失败';
                // 保留上次有效数据
            } finally {
                this.isLoading = false;
            }
        }
    }
}


  </script>
  
  <style scoped>
  span {
    margin: auto 3px;
  }
  
  .loading {
    font-size: 14px;
    color: #409eff;
    font-weight: bold;
  }
  
  .error-message {
    color: red;
    font-weight: bold;
    margin-top: 10px;
  }
  </style>
  
  

在使用的页面中引用该组件：

import weather from '@/views/weather/top-weather.vue'
 export default{
        components:{
            weather
        },
}

在页面嵌入该组件：

<div class="weather-layout">
                <weather/>
            </div>