vue3+高德地图天气预报

天气预报"/>

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-15zooms:[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: '.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: '.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-15zooms:[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: '.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.效果展示