您现在的位置是：首页 >技术杂谈 >vue使用的百度地图的天气查询功能网站首页技术杂谈
vue使用的百度地图的天气查询功能
简介vue使用的百度地图的天气查询功能
首先需要在 Vue.js 项目中安装百度地图 JavaScript API SDK，并获取相应的密钥（ak）。然后，可以按照以下步骤使用百度地图的天气查询功能并使用 Axios 进行请求：
官网文档：https://lbsyun.baidu.com/faq/api?title=webapi/weather/base
- 在
index.html中添加百度地图 JavaScript API SDK 的引用：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
请将 YOUR_AK 替换为你自己在百度地图开放平台申请的密钥。
- 在需要使用天气查询功能的组件中，用以下代码创建一个名为
map的百度地图实例：
created() {
const map = new BMap.Map("map-container");
this.map = map;
}
其中 "map-container" 是容器元素的 ID，可以根据需要替换成其他值。同时，需要在 data 属性中添加 map 字段，以便在后续使用中保持对该实例的引用。
- 创建一个
getWeather方法，用于向百度地图天气 API 发送请求并处理返回结果：
methods: {
async getWeather() {
try {
const res = await axios.get(
"https://api.map.baidu.com/weather/v1/?district_id=110000&data_type=all&ak=YOUR_AK"
);
// 处理返回结果
} catch (error) {
console.error(error);
}
}
}
请将 YOUR_AK 替换为你自己在百度地图开放平台申请的密钥。此处使用了 Axios 库发送 GET 请求，并将返回结果存储在 res 变量中。
- 在组件模板中，添加一个按钮来触发
getWeather方法：
<button @click="getWeather">查询天气</button>
{
"status":0,
"result":{
"location":{
"country":"中国",
"province":"北京市",
"city":"北京市",
"name":"东城",
"id":"110101"
},
"now":{
"temp":4,
"feels_like":1,
"rh":73,
"wind_class":"2级",
"wind_dir":"东风",
"text":"多云",
"prec_1h":0,
"clouds":999999,
"vis":3471,
"aqi":140,
"pm25":107,
"pm10":0,
"no2":23,
"so2":22,
"o3":70,
"co":1.7,
"uptime":"20200220143500"
},
"indexes":[
{
"name":"晨练指数",
"brief":"较适宜",
"detail":"天气阴沉，请避免在林中晨练。"
},
{
"name":"洗车指数",
"brief":"适宜",
"detail":"天气较好，适合擦洗汽车。"
},
{
"name":"感冒指数",
"brief":"易发",
"detail":"天凉，昼夜温差大，易感冒"
},
{
"name":"紫外线指数",
"brief":"最弱",
"detail":"辐射弱，涂擦SPF8-12防晒护肤品。"
},
{
"name":"穿衣指数",
"brief":"较冷",
"detail":"建议着厚外套加毛衣等服装。"
},
{
"name":"运动指数",
"brief":"较适宜",
"detail":"气温较低，在户外运动请注意增减衣物。"
}
],
"alerts":[
{
"type": "道路冰雪",
"level": "蓝色预警",
"title": "市气象局发布道路冰雪蓝色预警[IV级/一般]",
"desc": "市气象局发布道路冰雪蓝色预警信号:受降雪天气影响，
预计未来 24 小时我市将出现对交通有影响的道路结冰或积雪，
请有关部门及广大群众做好防范工作。"
}
],
"forecasts":[
{
"date":"2020-02-20",
"week":"星期四",
"high":7,
"low":-2,
"wc_day":"<3级",
"wc_night":"<3级",
"wd_day":"东南风",
"wd_night":"北风",
"text_day":"多云",
"text_night":"阴",
"aqi":93
},
{
"date":"2020-02-21",
"week":"星期五",
"high":11,
"low":1,
"wc_day":"4~5级",
"wc_night":"<3级",
"wd_day":"西北风",
"wd_night":"西北风",
"text_day":"多云",
"text_night":"晴",
"aqi":44
},
{
"date":"2020-02-22",
"week":"星期六",
"high":10,
"low":-2,
"wc_day":"<3级",
"wc_night":"<3级",
"wd_day":"西风",
"wd_night":"南风",
"text_day":"晴",
"text_night":"晴",
"aqi":39
},
{
"date":"2020-02-23",
"week":"星期日",
"high":11,
"low":0,
"wc_day":"<3级",
"wc_night":"<3级",
"wd_day":"北风",
"wd_night":"北风",
"text_day":"晴",
"text_night":"晴",
"aqi":65
},
{
"date":"2020-02-24",
"week":"星期一",
"high":9,
"low":-1,
"wc_day":"<3级",
"wc_night":"<3级",
"wd_day":"东风",
"wd_night":"东北风",
"text_day":"多云",
"text_night":"多云",
"aqi":38
},
{
"date":"2020-02-25",
"week":"星期二",
"high":9,
"low":-3,
"wc_day":"<3级",
"wc_night":"<3级",
"wd_day":"东南风",
"wd_night":"西南风",
"text_day":"晴",
"text_night":"晴",
"aqi":27
},
{
"date":"2020-02-26",
"week":"星期三",
"high":9,
"low":-3,
"wc_day":"<3级",
"wc_night":"<3级",
"wd_day":"西南风",
"wd_night":"西南风",
"text_day":"晴",
"text_night":"晴",
"aqi":26
}
],
"forecast_hours":[
{
"text":"晴",
"temp_fc":14,
"wind_class":"3~4级",
"wind_dir":"西南风",
"rh":15,
"prec_1h":0,
"clouds":10,
"data_time":"2020-04-01 16:00:00"
},
{
"text":"晴",
"temp_fc":14,
"wind_class":"3~4级",
"wind_dir":"西南风",
"rh":13,
"prec_1h":0,
"clouds":10,
"data_time":"2020-04-01 17:00:00"
},
{
"text":"晴",
"temp_fc":13,
"wind_class":"<3级",
"wind_dir":"西南风",
"rh":14,
"prec_1h":0,
"clouds":10,
"data_time":"2020-04-01 18:00:00"
},
{
"text":"晴",
"temp_fc":11,
"wind_class":"<3级",
"wind_dir":"西南风",
"rh":15,
"prec_1h":0,
"clouds":10,
"data_time":"2020-04-01 19:00:00"
},
{
"text":"晴",
"temp_fc":10,
"wind_class":"<3级",
"wind_dir":"西南风",
"rh":16,
"prec_1h":0,
"clouds":10,
"data_time":"2020-04-01 20:00:00"
},
{
"text":"晴",
"temp_fc":9,
"wind_class":"<3级",
"wind_dir":"西风",
"rh":18,
"prec_1h":0,
"clouds":6,
"data_time":"2020-04-01 21:00:00"
},
{
"text":"晴",
"temp_fc":9,
"wind_class":"<3级",
"wind_dir":"西风",
"rh":20,
"prec_1h":0,
"clouds":3,
"data_time":"2020-04-01 22:00:00"
},
{
"text":"晴",
"temp_fc":8,
"wind_class":"<3级",
"wind_dir":"西风",
"rh":21,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-01 23:00:00"
},
{
"text":"晴",
"temp_fc":7,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":26,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 00:00:00"
},
{
"text":"晴",
"temp_fc":6,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":31,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 01:00:00"
},
{
"text":"晴",
"temp_fc":6,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":36,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 02:00:00"
},
{
"text":"晴",
"temp_fc":5,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":39,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 03:00:00"
},
{
"text":"晴",
"temp_fc":4,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":42,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 04:00:00"
},
{
"text":"晴",
"temp_fc":4,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":45,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 05:00:00"
},
{
"text":"晴",
"temp_fc":5,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":40,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 06:00:00"
},
{
"text":"晴",
"temp_fc":7,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":34,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 07:00:00"
},
{
"text":"晴",
"temp_fc":8,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":29,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 08:00:00"
},
{
"text":"晴",
"temp_fc":11,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":29,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 09:00:00"
},
{
"text":"晴",
"temp_fc":13,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":29,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 10:00:00"
},
{
"text":"晴",
"temp_fc":16,
"wind_class":"<3级",
"wind_dir":"西北风",
"rh":29,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 11:00:00"
},
{
"text":"晴",
"temp_fc":17,
"wind_class":"3~4级",
"wind_dir":"西北风",
"rh":24,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 12:00:00"
},
{
"text":"晴",
"temp_fc":18,
"wind_class":"3~4级",
"wind_dir":"西北风",
"rh":19,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 13:00:00"
},
{
"text":"晴",
"temp_fc":19,
"wind_class":"3~4级",
"wind_dir":"西北风",
"rh":14,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 14:00:00"
},
{
"text":"晴",
"temp_fc":19,
"wind_class":"<3级",
"wind_dir":"西风",
"rh":17,
"prec_1h":0,
"clouds":0,
"data_time":"2020-04-02 15:00:00"
}
]
},
"message":"success"
}
这样，在用户点击按钮时就会向百度地图天气 API 发送请求并处理结果。
注意：以上代码仅为示例，实际项目中可能需要根据实际情况进行修改和调整。
我们更多的是让后端在服务器进行请求，然后把数据返回给前端，这样可以减少跨域和代理的麻烦！
官网文档：https://lbsyun.baidu.com/faq/api?title=webapi/weather/base
风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。
站长推荐
- stm32使用HAL库配置串口中断收发数据（保姆级教程）
stm32使用HAL库配置串口中断收发数据（保姆级教程） - SpringSecurity实现前后端分离认证授权
SpringSecurity实现前后端分离认证授权 - U8W/U8W-Mini使用与常见问题解决
U8W/U8W-Mini使用与常见问题解决 - 【社区图书馆】伴我前行的一本书《The C Programming Language》
【社区图书馆】伴我前行的一本书《The C Programming Language》 - 【云原生进阶之容器】第六章容器网络6.6.1--Cilium网络方案概述
【云原生进阶之容器】第六章容器网络6.6.1--Cilium网络方案概述