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

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>