天气预报"/>
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.效果展示
更多推荐
vue3+高德地图天气预报
发布评论