Vue3 setup 高德地图获取天气信息

最新推荐文章于 2024-07-25 09:51:39 发布

weixin_45691697

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量688

点赞数 12

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45691697/article/details/134876661

版权

1.定义

const state = reactive({
    weatherTime:'',
    weather:'',
});

2.调用接口(高德api接口为免费接口，每天份额为300000次)

const weather = (city) => {
    axios.get('https://restapi.amap.com/v3/weather/weatherInfo', {
        params: {
            city: city, //你的城市
            key: '你的key',//高德api创建项目获取的key
            extensions: 'base'
        }
    }).then(res => {
        if(res.status === 200 && Array.isArray(res.data.lives) && res.data.lives.length){
            state.weatherTime = res.data.lives[0].temperature
            state.weather = res.data.lives[0].weather
        }
    })
}

3.页面渲染

<div class="header-title d-flex justify-content-end margin-top-10">
        <div class="d-flex margin-top-10 margin-right-10 size-white">
            <p>{{ state.time }} {{ state.week }}</p>
            <p class="margin-left-10">
                <img class="width-24" :src="'/src/assets/image/weather-img/'+state.weather+'.png'" alt="">
            </p>
            <p class="margin-left-10">{{ state.weatherTime }}℃</p>
        </div>
    </div>