vue3+高德地图天气预报
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
今天更新一下如何利用vue3和高德地图中的天气api来实现点击某个地区获取其天气情况及未来几天的天气预报效果。强调一下本次是通过vue3实现的具体效果。
1.搭建vue3框架，这个不进行详细说明
2.NPM 安装 Loader
npm i @amap/amap-jsapi-loader --save3.新建 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.效果展示
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)