使用mui+Vue+百度地图显示当前所在地的天气信息

zh3210576

已于 2022-05-25 11:38:33 修改

阅读量568

点赞数

分类专栏： mui 文章标签： vue.js javascript

于 2022-05-25 11:36:58 首次发布

本文链接：https://blog.youkuaiyun.com/zh3210576/article/details/124963001

版权

mui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue项目中集成百度地图API并获取当前位置信息，进一步调用第三方天气API来显示当前城市的天气温度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需要的环境准备

mui.js、vue.js、百度地图开发者平台的AK
在这里插入图片描述

PS：AK申请在前面的文章有介绍AK申请

2.实现逻辑

本质上是在vue中使用钩子函数获取当前所在的城市，之后再使用json解析对应的天气信息

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
	<script src="js/vue.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<script src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=kbvpctyWIDGmCh4ddN68gXg3vgiGbQ7n"></script>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content" id="app">
		{{wendu}}
	</div>
	<div id="container"></div>
	<script>
		var vue = new Vue({
			el:'#app',
			data:{
				wendu:''
			},
			methods:{
			},
			mounted(){
				var map = new BMapGL.Map("container");
				//地址信息转化编码
				var gc = new BMapGL.Geocoder();
				var geolocation = new BMapGL.Geolocation();
				geolocation.getCurrentPosition(function(r){
					if(this.getStatus()==BMAP_STATUS_SUCCESS){
						gc.getLocation(r.point,function(rs){
							var add = rs.addressComponents;
							//vue.wendu = add.city
							mui.getJSON("http://wthrcdn.etouch.cn/weather_mini?city="+add.city,{},success);
						});
						var success = function(response){
							//wendu和ganmao都是唯一的属性，可以认为是id，其余其他属性都存在多个的情况
							var wendu = document.getElementById("now");
							if(JSON.stringify(response.status)==1002){
								//1002状态码为错误城市名称的返回JSON信息
								mui.alert("您的城市名称有误！");
								return;
							}else{
								vue.wendu = JSON.stringify(response.data.wendu).substring(1,JSON.stringify(response.data.wendu).length-1)+"℃";					
							}
						}
					}else{
						mui.alert("发送错误："+this.getStatus());
					}
				});
			}
		})
	</script>
</body>
</html>

3.显示效果

在这里插入图片描述