自动定位当前位置的天气预报_天气API[通俗易懂]

开头先说一下，以防有萌新看不懂，所以以下代码注释写的比较多，思路讲的比较清楚，不喜勿喷哈哈哈哈

HTML代码：

<div id="show_weather">
	<div id="time"></div>
	<div id="updata_time"></div>
	<div id="city_id"></div>
	<div id="weather"></div>
	<div id="air_level"></div>
	<div id="max_wendu"></div>
	<div id="min_wendu"></div>
</div>
<div id="show_change">
	<span id="guangzhou" value="广州">广州</span>
	<span id="shenzhen" value="深圳">深圳</span>
	<span id="beijing" value="北京">北京</span>
	<span id="shanghai" value="上海">上海</span>
</div>
<div>
	<span>当前位置：</span><span id="city"></span><span id="hover_weather">天气</span><span id="change_weather">切换地区</span>
</div>

JS代码：

1.首先，我们应该先获取当前我们当前的ip地址，利用ip地址找到我们身处的具体位置信息，让网页加载的第一时间获取到我们当前身处的具体位置，从而获取当前地区的天气信息

//动态获取当前位置的ip地址
function dynamicIp(){
	$.ajax({
		//该url可以从服务器获取我们需要的ip
		url: 'https://bird.ioliu.cn/ip',
		type: 'get',
		//dataType一定要设置为jsonp，因为浏览器有同源策略的限制
		//同源即：协议、域名、端口都要相同
		//如果不相同，则Ajax无法获取服务器返回的结果
		//如果想要获取不同源的数据，可以将dataType设置为jsonp，就可以解决跨域的问题
		dataType: 'jsonp',
		//从url返回一个成功回调函数success，该函数会携带返回结果，将结果以data传入回调函数
		success:function(data){	
			//通过返回结果data获取我们当前位置的ip地址
			var cityip = data.data.ip;
			//获取到当前位置的ip地址后，将ip地址赋值给cityip
			//调用我们的动态获取天气的函数dynamicGetWeather，将cityip以参数的形式传入
			dynamicGetWeather(cityip);
		}
	})
}
//页面加载时自动执行获取ip地址的函数dynamicIp()
dynamicIp();

2.获取到ip地址后，我们应该利用ip地址来获取当前ip地址下的天气信息

//动态获取天气的方法
function dynamicGetWeather(cityip){
	//声明一个pattern正则表达式规则，用来检测我们更新地区时传入的参数是ip地址还是汉字地区名称，如"广州"
	var pattern = new RegExp("[\u4E00-\u9FA5]+");
	if(pattern.test(cityip)){
		//当传入的参数cityip为汉字时，我们将url中的参数设置为city=，以此来接收我们传入的城市名称来获取该城市的天气信息
		$.ajax({
		url: 'https://www.tianqiapi.com/api/?version=v1&city='+cityip,
		type: 'get',
		dataType: 'jsonp',
		//url成功返回时，执行回调函数success，获取到服务器返回的数据，以data传入
		success:function(data){
			//以下是html页面数据的实时渲染
			$('#city').text(data.city);
			$('#time').text("当前时间："+data.data[0].date.slice(5));
			$('#updata_time').text("预报更新时间："+data.update_time);
			$('#weather').text("天气："+data.data[0].wea);
			$('#air_level').text("空气质量："+data.data[0].air_level);
			$('#max_wendu').text("最高温度："+data.data[0].tem1);
			$('#min_wendu').text("最低温度："+data.data[0].tem2);
			console.log(data);
		}
	})
	}else{
		//当传入的参数cityip为ip地址(如：113.101.59.68)时，我们将url中的参数设置为ip=，以此来接收我们传入的ip来获取该城市的天气信息
		//这个方法一般只有页面第一次加载，或者页面刷新时才会执行，因为我们切换地区时，传入的都是汉字，执行的是if为true时执行的方法
		$.ajax({
		url: 'https://www.tianqiapi.com/api/?version=v1&ip='+cityip,
		type: 'get',
		dataType: 'jsonp',
		success:function(data){
			//以下是html页面数据的实时渲染
			$('#city').text(data.city);
			$('#time').text("当前时间："+data.data[0].date.slice(5));
			$('#updata_time').text("预报更新时间："+data.update_time);
			$('#weather').text("天气："+data.data[0].wea);
			$('#air_level').text("空气质量："+data.data[0].air_level);
			$('#max_wendu').text("最高温度："+data.data[0].tem1);
			$('#min_wendu').text("最低温度："+data.data[0].tem2);
			console.log(data);
		}
	})
	}
	
}

3.获取到当前ip下的天气预报信息后，我们还想通过切换地区来获取别的地区的天气信息

//切换地区时，动态更新天气信息
//点击切换地区时，触发click事件
$("#show_change span").click(function(event) {
	//获取我们当前点击的是哪个地区，获取该地区的地区名称(如"广州")
	var cityName = $(this).text();
	//获取到地区名称后，调用dynamicGetWeather()函数，将地区名称cityName以参数形式传入
	//传入后会执行dynamicGetWeather()方法中的if为true时定义的方法，即执行传入参数为汉字时定义的方法
	dynamicGetWeather(cityName);
});

以上我们就可以获取我们当前地区的天气预报信息和切换地区后更新天气预报信息，主要涉及到同源策略和跨域的问题，当遇到不同源的url时，我们可以通过jQuery的$.ajax方法的dataType属性设置为jsonp的形式，可以实现不同源跨域获取服务器数据

我做这个天气预报时，遇到较多的问题就是天气预报的API接口不能用，获取API接口能用但是获取到的数据我们无法使用，即使格式化了也是无法使用的，找了很久才找到了这两个API接口，亲测目前是能够使用的，过段时间我就不知道了。第一个动态获取当前ip地址的API，url是https://bird.ioliu.cn/ip，请求方式为get，dataType数据类型为jsonp，第二个是获取某城市当前天气预报的API，url是https://www.tianqiapi.com/api/?version=v1&city=，参数有多个，可以是city（城市名称），可以是ip（ip地址），可以是cityid（城市编号），请求方式为get，dataType数据类型为jsonp，具体参考该接口文档

今天的文章自动定位当前位置的天气预报_天气API[通俗易懂]分享到此就结束了，感谢您的阅读。