数据准备
首先，我们要想拿到准确的天气数据，我们要找到能拿到官方的数据渠道，而一般能做地图的公司就会有数据，我们这里使用高德来获取定位以及后面几天的天气情况
我们先第三方登录高德开放平台
然后我们在文档支持里面选择想要的API，我使用的是JS API
我们要先注册为开发者，才能使用到里面的数据。
然后我们要创建一个key,才能用到高德上的功能
我们选择web端（JS API)，同意协议直接创建就行了
项目开发
我们使用终端打开我们想放置的文件夹，输入npm create vite@latest,然后取你的项目名称，接着选择vue框架，选择js这门编程语言。然后打开这个文件，npm install下载我们要准备的包, npm run dev开始运行项目，接下来就可以进行项目开发了。
lanhuapp.com/link/#/invi…,
根据这张蓝湖设计稿来写样式，页面上的图标均可从inconfont中引入
然后我们要去高德上拿取定位和天气数据，高德开发平台上都有告诉我们使用方法。
这是先要使用我们创建的key去获取权限
这里是拿到我们当前的定位
这里是拿到天气情况
然后我们再将使用vue框架创建的weather项目最终引入html文件里面就可以了，下面是完整代码
<template>
<div>
<div class="head">
<div class="city-name">
<i class="iconfont icon-dingwei"></i>
{{ state.city }}
</div>
<div class="city-change">
<i class="iconfont icon-24gf-city"></i>
切换城市
</div>
</div>
<div class="main">
<div class="weather-info">
<p class="temp">{{ state.weather.temperature }}℃</p>
<p class="info">{{ state.weather.weather }}</p>
<div class="detail">
<div class="item">
<i class="iconfont icon-shuidi"></i>
<span>湿度</span>
<span>{{ state.weather.humidity}}%</span>
</div>
<div class="item">
<i class="iconfont icon-feng"></i>
<span>风向</span>
<span>{{ state.weather.windDirection }}风</span>
</div>
<div class="item">
<i class="iconfont icon-fengli"></i>
<span>风力</span>
<span>{{ state.weather.windPower }}</span>
</div>
</div>
</div>
<div class="future">
<div class="title">未来三天</div>
<div class="future-item">
<div class="items" v-for="(item, index) in state.future" :key="item.date">
<div class="day">
周{{ item.week }}
</div>
<div class="icon">
<i :class="'iconfont ' + weatherIcon[state.future[index]. dayWeather]"></i>
</div>
<div class="future-temp">
<div class="future-Dtemp">{{ item.dayTemp }}°C</div>
<div class="future-Ntemp">/{{ item.nightTemp }}°C</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="tempTrend">温度走势</div>
<div class="lineChart">折线图</div>
</div>
</div>
</div>
</template>
<script setup>
const state = reactive({
weather: {},
future: {},
city: '北京市',
})
const weatherIcon ={
"多云" :"icon-duoyun",
"晴" : "icon-lieri",
"雨" : "icon-yu",
"雪" : "icon-xiaoxue",
"雷" : "icon-leidian",
}
import AMapLoader from '@amap/amap-jsapi-loader';
import{ onMounted ,reactive} from 'vue'
onMounted(() => {
window._AMapSecurityConfig = {
securityJsCode: "a6ba0c016229c5fddb81414c70727b11",
};
AMapLoader.load({
key: "ca704bf19f1d67f89125eac83eed3cea", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
.then((AMap) => {
//获取定位
getLocalCity(AMap)
})
})
const getLocalCity = (AMap) => {
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功，result即为当前所在城市信息
console.log(result)
state.city = result.city
getWeather(AMap)
getFutureWeather(AMap)
}
})
})
}
const getWeather = (AMap) => {
//加载天气查询插件
AMap.plugin("AMap.Weather", function () {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询
weather.getLive(state.city, function (err, data) {
console.log(err, data);
state.weather = data
//err 正确时返回 null
//data 返回实时天气数据，返回数据见下表
});
});
}
const getFutureWeather = (AMap) => {
AMap.plugin("AMap.Weather", function () {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询
weather.getForecast(state.city, function (err, data) {
console.log(err, data);
state.future=data.forecasts.slice(1)
console.log(state.future[0]. dayWeather);
//err 正确时返回 null
//data 返回天气预报数据，返回数据见下表
});
});
}
</script>
<style lang="css" scoped>
.head{
height: 53px;
background: #8E6FF7;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
padding: 0 15px;
}
.city-name{
font-size: 18px;
}
.city-change{
padding: 4px 12px;
background: rgba(255,255,255,0.2);
border-radius: 4px 4px 4px 4px;
font-family: Roboto, Roboto;
font-weight: 400;
font-size: 14px;
}
.main{
padding: 7px 16px 20px 16px;
}
.weather-info{
width: 100%;
background: linear-gradient(146deg, rgba(142, 111, 247, 0.1) 0%, rgba(142, 111, 247, 0.05) 100%), rgba(0, 0, 0, 0);
border-radius: 16px 16px 16px 16px;
padding: 24px;
box-sizing: border-box;
}
.temp{
font-family: Roboto, Roboto;
font-weight: 300;
font-size: 60px;
color: #000000;
line-height: 60px;
text-align: center;
}
.info{
font-family: Roboto, Roboto;
font-weight: 400;
font-size: 14px;
color: #4B5563;
line-height: 21px;
text-align: center;
}
.detail{
display: flex;
margin-top: 24px;
}
.item{
flex:1;
display: flex;
flex-direction: column;
align-items: center
}
.itesm i{
color: #8E6FF7;
}
.item span:nth-child(2){
font-size: 14px;
color: #4B5563;
}
.item span:nth-child(3){
font-size: 16px;
color: #000000;
}
.future{
margin:24px 0 24px 0;
}
.title {
width: 108px;
height: 28px;
font-family: Roboto, Roboto;
font-weight: 500;
font-size: 18px;
color: #000000;
line-height: 28px;
text-align: left;
font-style: normal;
text-transform: none;
margin-bottom: 16px;
}
.future-item {
display: flex;
font-family: Roboto, Roboto;
font-weight: 400;
font-size: 16px;
color: #000000;
line-height: 24px;
}
.day{
font-family: Roboto, Roboto;
font-weight: 400;
font-size: 14px;
color: #4B5563;
}
.items{
flex:1;
display: flex;
flex-direction: column;
padding: 17px;
margin-right: 16px;
background: #FFFFFF rgba(0,0,0,0.001);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
border-radius: 16px 16px 16px 16px;
border: 1px solid #F3F4F6;
}
.future-temp {
text-align: center;
margin: 0 8px;
display: flex;
}
.future-Dtemp {
font-family: Roboto, Roboto;
font-weight: 400;
font-size: 16px;
color: #000000;
margin-right: 1px;
}
.future-Ntemp {
display: flex;
font-family: Roboto, Roboto;
font-weight: 400;
font-size: 14px;
color: #9CA3AF;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 11px 8px 11px;
box-sizing: content-box;
}
.icon i {
font-size: 32px;
}
.container{
margin: 0 16px 20px 16px ;
}
.lineChart{
margin-top: 16px;
}
</style>
这样，一个完美的天气预报的小demo就做好了，赶紧学学，以后都能精准定位了。
