vue3+高德地图天气预报

今天更新一下如何利用vue3和高德地图中的天气api来实现点击某个地区获取其天气情况及未来几天的天气预报效果。强调一下本次是通过vue3实现的具体效果。

1.搭建vue3框架，这个不进行详细说明

2.NPM 安装 Loader 

npm i @amap/amap-jsapi-loader --save

3.新建 map.vue 文件，这里我放置在名为views的文件夹中，说明一下需要用到router路由

4.创建地图容器：在 map.vue 地图组件中创建 <div> 标签作为地图容器 ，并设置地图容器的 id 属性为 container。

<template>
    <div id="container"></div>
</template>

5.设置地图容器样式

<style lang='less' scoped>
#container{
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 0;
    position: relative;
}
</style>

6.引入JS API  Loader :在地图组件 map.vue 中引入 amap-jsapi-loader 

import AMapLoader from "@amap/amap-jsapi-loader"

7.初始化并创建地图

import { onMounted, shallowRef} from 'vue'
const map = shallowRef(null);//定义一个map对象
//初始化地图
const initMap=()=>{
    window._AMapSecurityConfig = {
            securityJsCode:'你自己的安全密钥',//安全密钥
    }
    AMapLoader.load({
        key:'你的密钥',  //设置密钥
        version:"2.0",//版本
        plugins:['AMap.Weather','AMap.Marker'],
    }).then((AMap)=>{
    map.value = new AMap.Map("container",{
            viewMode:"3D",//地图模式
            pitch:20,//角度
            zoom:11,//缩放，缩放级别在3-15
            zooms:[2,22],
            mapStyle: 'amap://styles/blue', //设置地图的显示样式
            center:[118.88064,32.11352],//初始化地图中心点位置
    });
}).catch(e=>{
        console.log(e);
})
onMounted(()=>{
    initMap()
})

8.获取天气

<div class="info" v-show="showFore">
        <h4>预报天气</h4>
        <p id='forecast'></p>
</div>

 第一种方式

AMap.plugin('AMap.Weather', ()=>{
            let weather = new AMap.Weather();//引入地图插件
            weather.getLive('栖霞区', (err, data)=> {
                // console.log(err, data);
                if (!err) {
                    let str = [];
                    str.push("<h4 >实时天气</h4>");
                    str.push('<p>城市/区：' + data.city + '</p>');
                    str.push('<p>天气：' + data.weather + '</p>');
                    str.push('<p>温度：' + data.temperature + '℃</p>');
                    str.push('<p>风向：' + data.windDirection + '</p>');
                    str.push('<p>风力：' + data.windPower + ' 级</p>');
                    str.push('<p>空气湿度：' + data.humidity + '</p>');
                    str.push('<p>发布时间：' + data.reportTime + '</p>');
                    console.log(str)
                    let marker = new AMap.Marker({
                        map: map, 
                        position: map.value.getCenter(),
                        icon: 'https://webapi.amap.com/images/car.png',
                        autoRotation: true, // 自动旋转
                        angle: 90 // 图片旋转角度
                    });
                    marker.on('mouseover', (e)=> {
                        let infoWin = new AMap.InfoWindow({
                            content:'<div class="info" style="position:inherit;margin-bottom:0;width:240px;height:180px;background: rgba(40, 101, 215,0.5);color:#fff;border-radius: 5px;display:flex;flex-direction: column;justify-content: space-around;">'
                                +str.join('')+'</div>',
                            isCustom:true,
                            offset: new AMap.Pixel(0, -20)
                        });
                        infoWin.open(map.value, e.target.getPosition());
                        showFore.value=true
                    });
                    marker.on('mouseout',()=>{
                        // timer = setTimeout(()=> {
                        // }, 500)
                    })
                    map.value.add(marker);
                }
            })
            // console.log(weather)
            //未来4天天气预报
            weather.getForecast('栖霞区', (err, data)=>{
                console.log(err, data)
                if (err) {return;}
                let str = [];
                for (let i = 0,dayWeather; i < data.forecasts.length; i++) {
                    dayWeather = data.forecasts[i];
                    str.push(dayWeather.date+' <span class="weather">'+dayWeather.dayWeather+'</span> '+ dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
                }
                console.log(str,'未来天气')
                document.getElementById('forecast').innerHTML = str.join('<br>');
            });
        })

 第二种方式

AMap.plugin('AMap.Weather', ()=>{
            let weather = new AMap.Weather();//引入地图插件
            weather.getLive('栖霞区', (err, data)=> {
                // console.log(err, data);
                if (!err) {
                    let str = [];
                    str.push("<h4 >实时天气</h4>");
                    str.push('<p>城市/区：' + data.city + '</p>');
                    str.push('<p>天气：' + data.weather + '</p>');
                    str.push('<p>温度：' + data.temperature + '℃</p>');
                    str.push('<p>风向：' + data.windDirection + '</p>');
                    str.push('<p>风力：' + data.windPower + ' 级</p>');
                    str.push('<p>空气湿度：' + data.humidity + '</p>');
                    str.push('<p>发布时间：' + data.reportTime + '</p>');
                    console.log(str)
                    //添加标记
                    let marker = new AMap.Marker({
                        map: map, 
                        position: map.value.getCenter(),
                        icon: 'https://webapi.amap.com/images/car.png',
                        autoRotation: true, // 自动旋转
                        angle: 90 // 图片旋转角度
                    });
                    //自定义信息窗体
                    let infoWin = new AMap.InfoWindow({
                            content:'<div class="info" style="position:inherit;margin-bottom:0;width:240px;height:180px;background: rgba(40, 101, 215,0.5);color:#fff;border-radius: 5px;display:flex;flex-direction: column;justify-content: space-around;">'
                                +str.join('')+'</div>',
                            isCustom:true,
                            offset: new AMap.Pixel(0, -20)
                    });
                    marker.on('mouseover', infoOpen);//鼠标经过打开信息窗体
                    marker.on('mouseout', infoClose);//鼠标离开关闭信息窗体
                    function infoOpen(e){
                        infoWin.open(map.value, e.target.getPosition());
                        showFore.value=true
                    }
                    function infoClose(e){
                        infoWin.close(map.value, e.target.getPosition());
                        showFore.value=false
                    }
                    map.value.add(marker);
                }
            })
            //未来4天天气预报
            weather.getForecast('栖霞区', (err, data)=>{
                console.log(err, data)
                if (err) {return;}
                let str = [];
                for (let i = 0,dayWeather; i < data.forecasts.length; i++) {
                    dayWeather = data.forecasts[i];
                    str.push(dayWeather.date+' <span class="weather">'+dayWeather.dayWeather+'</span> '+ dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
                }
                console.log(str,'未来天气')
                document.getElementById('forecast').innerHTML = str.join('<br>');
            });
        })

9.全部代码

<template>
    <div id="container"></div>
    <div class="info" v-show="showFore">
        <h4>预报天气</h4>
        <p id='forecast'></p>
    </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader"
import { onMounted, shallowRef,ref} from 'vue'
const showFore=ref(false)
const map = shallowRef(null);//定义一个map对象
//初始化地图
const initMap=()=>{
    window._AMapSecurityConfig = {
            securityJsCode:'a500c9a70ad5d03db8bf3897fd9990f9',//安全密钥
    }
    AMapLoader.load({
        key:'489d0a338a7a792a72327d1fbd470c8a',  //设置密钥
        version:"2.0",//版本
        // plugins:['AMap.Geolocation','AMap.ToolBar','AMap.HawkEye','AMap.MapType','AMap.Weather','AMap.Marker'],
    }).then((AMap)=>{
        map.value = new AMap.Map("container",{
            viewMode:"3D",//地图模式
            pitch:20,//角度
            zoom:11,//缩放，缩放级别在3-15
            zooms:[2,22],
            mapStyle: 'amap://styles/blue', //设置地图的显示样式
            center:[118.88064,32.11352],//初始化地图中心点位置
        });
        AMap.plugin('AMap.Weather', ()=>{
            let weather = new AMap.Weather();//引入地图插件
            weather.getLive('栖霞区', (err, data)=> {
                // console.log(err, data);
                if (!err) {
                    let str = [];
                    str.push("<h4 >实时天气</h4>");
                    str.push('<p>城市/区：' + data.city + '</p>');
                    str.push('<p>天气：' + data.weather + '</p>');
                    str.push('<p>温度：' + data.temperature + '℃</p>');
                    str.push('<p>风向：' + data.windDirection + '</p>');
                    str.push('<p>风力：' + data.windPower + ' 级</p>');
                    str.push('<p>空气湿度：' + data.humidity + '</p>');
                    str.push('<p>发布时间：' + data.reportTime + '</p>');
                    console.log(str)
                    //添加标记
                    let marker = new AMap.Marker({
                        map: map, 
                        position: map.value.getCenter(),
                        icon: 'https://webapi.amap.com/images/car.png',
                        autoRotation: true, // 自动旋转
                        angle: 90 // 图片旋转角度
                    });
                    //自定义信息窗体
                    let infoWin = new AMap.InfoWindow({
                            content:'<div class="info" style="position:inherit;margin-bottom:0;width:240px;height:180px;background: rgba(40, 101, 215,0.5);color:#fff;border-radius: 5px;display:flex;flex-direction: column;justify-content: space-around;">'
                                +str.join('')+'</div>',
                            isCustom:true,
                            offset: new AMap.Pixel(0, -20)
                    });
                    marker.on('mouseover', infoOpen);//鼠标经过打开信息窗体
                    marker.on('mouseout', infoClose);//鼠标离开关闭信息窗体
                    function infoOpen(e){
                        infoWin.open(map.value, e.target.getPosition());
                        showFore.value=true
                    }
                    function infoClose(e){
                        infoWin.close(map.value, e.target.getPosition());
                        showFore.value=false
                    }
                    map.value.add(marker);
                }
            })
            //未来4天天气预报
            weather.getForecast('栖霞区', (err, data)=>{
                console.log(err, data)
                if (err) {return;}
                let str = [];
                for (let i = 0,dayWeather; i < data.forecasts.length; i++) {
                    dayWeather = data.forecasts[i];
                    str.push(dayWeather.date+' <span class="weather">'+dayWeather.dayWeather+'</span> '+ dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
                }
                console.log(str,'未来天气')
                document.getElementById('forecast').innerHTML = str.join('<br>');
            });
        })
    }).catch(e=>{
        console.log(e);
    })
}
onMounted(()=>{
    initMap()
})
</script>

<style lang='less' scoped>
#container{
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 0;
    position: relative;
}
.info{
    width:220px;
    height:140px;
    background: rgba(40, 101, 215,0.5);
    color:#fff;
    border-radius: 5px;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    top: 10%;
    left: 60%;
    h4{
        font-size: 16px;
        text-align: center;
        height: 16px;
        &::after{
            content: '';
            width: 200px;
            height: 1px;
            border-bottom: 1px solid #fff;
            display: inline-block;
        }
    }
    p{
        font-size: 14px;
    }
}
</style>

10.效果展示