爬虫实践：爬取城市AQI实时报和日报数据

首发创作赛#

有粉丝经常私信于我，咨询网络爬虫的技巧。网络爬虫，有许多现成的框架，每个框架都有优缺点。如果要精通网络爬虫，就需要有html和javascript知识的积累。如果没有，就得学习，否则......其实网上也流传着爬取城市空气质量数据的方法的博客和文章，但是爬取的网站不同，方法也各异，有的不是爬取的权威网上的数据，来源也各异，具体数据来使用需要谨慎。

本人主要是想，通过不同案例，给粉丝展示不同网站爬取信息的应用技巧。本文章主要是向大家介绍，使用requests获取权威网站公开发布的信息，不存在不能公开传播的问题。并使用bs4解析爬取，城市AQI信息，即爬取AQI实时报和AQI日报。现在整理出来分享给给大家。废话不说了，直入主题。如果有不懂得地方，可以参考我以前写的几篇爬虫文章。

一、目标网站

目标网址：https://www.mee.gov.cn/

二、分析网站数据组织形式

用浏览器打开https://www.mee.gov.cn/网站，如下图所示：

将浏览器进入调试模式，如下图所示。

分析其网页html代码，左边红框显示的是AQI实时报和AQI日报的内容，右边红框显示是对应的html的代码。

需要指出的是：在进行爬取网站数据的时候，要有一定的html知识，这样才能有效地分析网页代码。

IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。简而言之，就是嵌套一个子网页内容。

而这个网页的内容的地址是：
http://datacenter.mee.gov.cn/websjzx/homepages/airDatas.vm。这是正确爬取全国城市空气质量指数AQI至关重要的一步。

三、实现过程

第一步：导入库

import requests
from bs4 import BeautifulSoup

第二步：获取网页源代码

除了网站的不同个，和我前面头条的文章讲过的一模一样。

url='http://datacenter.mee.gov.cn/websjzx/homepages/airDatas.vm'
response=requests.get(url)
page=response.content.decode()

第三步：解析网页

1.html5lib方式解析信息

这个就不啰嗦了，我前面头条的文章已经细讲过了。

# 构建bs对象
soup=BeautifulSoup(page, 'html5lib')

2.获取AQI实时报和AQI日报的具体日期

通过分析网站返回的内容，AQI实时报和AQI日报的具体日期，如下图红色箭头所示：

AQI实时报的具体日期，在id="tempdrhour"的<div></div>图层中。

AQI日报的具体日期，在id="tempdrday"的<div></div>图层中。

代码如下：

#AQI实时报的具体日期
aqi_hour_date=soup.find(id='tempdrhour').text
#AQI日报的具体日期
aqi_day_date=soup.find(id='tempdrday').text

通过寻找id="tempdrhour"的text内容，得到AQI实时报的具体日期aqi_hour_date；

通过寻找id="tempdrday"的text内容，得到AQI实时报的具体日期aqi_day_date；

3.获取AQI实时报的城市、AQI和首要污染物

通过分析网站返回的内容，AQI实时报的具体内容在<table></table>的表格内容了。表体的id="legend_01_table"，如下入红色箭头所示。

一个城市一行数据，其结构为<tr><td></td><td></td><td></td></tr>，根据这个特点，编写代码如下：

air_hour_content=soup.find(id='legend_01_table')

tr=air_hour_content.find_all('tr')
hour_citys=[]
hour_aqis=[]
hour_pollutions=[]
# 获取AQI实时报的城市、AQI和首要污染物
for i in range(len(tr)):
    td=tr[i].find_all('td')
    city=td[0].text
    aqi=td[1].text.strip()
    pollution=td[2].text.strip()
    hour_citys.append(city)
    hour_aqis.append(aqi)
    hour_pollutions.append(pollution)

首先，找到id='legend_01_table'的具体内容，然后find_all寻找所有的tr的内容，接着对每一行的tr的内容，find_all寻找所有的单元格td的内容，最后得到城市：hour_citys、AQI：hour_aqis和首要污染物：hour_pollutions。

4.获取AQI日报的城市、AQI和首要污染物

通过分析网站返回的内容，AQII日报的具体内容在<table></table>的表格内容了。表体的id="legend_02_table"，如下入红色箭头所示。

一个城市一行数据，其结构为<tr><td></td><td></td><td></td></tr>，根据这个特点，编写代码如下：

air_day_content=soup.find(id='legend_02_table')

tr=air_day_content.find_all('tr')
day_citys=[]
day_aqis=[]
day_pollutions=[]
# 获取AQI日报的城市、AQI和首要污染物
for i in range(len(tr)):
    td=tr[i].find_all('td')
    city=td[0].text
    aqi=td[1].text.strip()
    pollution=td[2].text.strip()
    day_citys.append(city)
    day_aqis.append(aqi)
    day_pollutions.append(pollution)

首先，找到id='legend_02_table'的具体内容，然后find_all寻找所有的tr的内容，接着对每一行的tr的内容，find_all寻找所有的单元格td的内容，最后得到城市：day_citys、AQI：day_aqis和首要污染物：day_pollutions。

5、保存解析后的数据

保存AQI实时报数据，代码如下：

file=open('aqi_hour.txt','w',encoding='UTF-8')
file.write(aqi_hour_date+'\n') 
file.write('城市,AQI,首要污染物\n')  
for i in range(len(hour_citys)):
    file.write(hour_citys[i]+','+hour_aqis[i]+','+hour_pollutions[i]+"\n")  
file.close()

AQI实时报数据保存在aqi_hour.txt中。

保存AQI日报数据，代码如下：

file=open('aqi_day.txt','w',encoding='UTF-8')
file.write(aqi_day_date+'\n') 
file.write('城市,AQI,首要污染物\n')  
for i in range(len(day_citys)):
    file.write(day_citys[i]+','+day_aqis[i]+','+day_pollutions[i]+"\n")  
file.close()

AQI日报数据保存在aqi_day.txt中。

当然，你也可以根据业务场景的需要保存在数据库中。这里我们就不另外讨论了。

需要说明的是，aqi实时报的网站
http://datacenter.mee.gov.cn/websjzx/homepages/airDatas.vm，每个小时官方网站更新一次，你如果需要爬取每个小时的数据，就需要每隔一个小时爬取一次就OK了。

总结：通过网页调试分析，正确识别提取全国城市空气质量指数AQI的网址，然后利用requests获取网页代码，接着用bs4进行分析，通过id识别表格内容和发布日期，最后获取到有用信息后保存到文本文件。

载链接：https://juejin.im/post/5e7e126b51882573c508be13

背景

最近在做一个类似支付宝口碑商家的功能模块，其中有个功能就是计算出用户与商家的距离，如下图：

支付宝口碑商家页面截图

思路分析

1、商家选取店铺地址，将坐标经纬度存入数据库；

2、移动端定位当前用户坐标经纬度；

3、将商家经纬度从数据库取出与当前用户经纬度进行计算；

4、计算出的距离显示在用户端；

用到的工具

1、HTML5地理定位API；

2、百度地图API；

百度地图API使用

1、在百度地图开放平台注册开发者账号；

2、登录开发者账号，在控制台中创建应用，如下图：

注意：移动web端的话，应用类型记得选择浏览器端

代码实现

1、创建seller.html文件，用来提供商家选取地址坐标经纬度；

注意：代码中的ak="您的密钥"，记得换成控制台中创建应用的AK密钥

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{
            width: 100%;
            height: 100%;
            margin:0;
            font-family:"微软雅黑";
            font-size:14px;
        }
        #l-map{
            height:300px;
            width:100%;
        }
        #r-result{
            width:100%;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>商家选取店铺地址</title>
</head>
<body>
    <div style="display: flex;">
        <div style="width: 50%;height: 700px" id="l-map"></div>
        <div style="width: 50%">
            <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        </div>
    </div>

</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map=new BMap.Map("l-map");
    map.centerAndZoom("北京",12);       // 初始化地图,设置城市和地图级别。

    var ac=new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
        ,"location" : map
    });


    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value=e.item.value;
        myValue=_value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML="onconfirm<br />index=" + e.item.index + "<br />myValue=" + myValue;

        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp=local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local=new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
    }


    //鼠标单击获取点击的经纬度
    map.addEventListener("click",function(e){
        alert('该点击区域的经纬度为：'+e.point.lng + "," + e.point.lat);//将该经纬度存入数据库中
    });

</script>复制代码

seller.html运行效果图如下：

2、创建user.html文件，用来定位用户坐标经纬度，及计算与商家的距离；

注意1：由于HTML5地理定位仅限在移动端生效，因此user.html需要在移动端下运行(可将文件直接发送到手机上，在手机上打开运行)

注意2：代码中的ak="您的密钥"，记得换成控制台中创建应用的AK密钥

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>计算用户到商家的距离</title>
</head>
<body>

</body>
</html>
<script type="text/javascript">

    //使用HTML5地理定位
    function getLocation(){

        //检测浏览器是否支持地理定位
      if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showPosition,showError);
            //如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
            //getCurrentPosition()方法的第二个参数showError用于处理错误。它规定当获取用户位置失败时运行的函数
        }else{
            alert("该设备浏览器不支持地理定位");
        }

      }


    function showPosition(position){

        var Longitude=position.coords.longitude;//HTML5定位获取的经度
        var Latitude=position.coords.latitude;//HTML5定位获取的纬度

        //将HTML5定位获取的经纬度，通过百度地图API转换成适应于百度定位的经纬度
        var ggPoint=new BMap.Point(Longitude,Latitude);

        //坐标转换完之后的回调函数
        translateCallback=function (data){
          if(data.status===0) {
            var map=new BMap.Map();
            console.log(data.points[0]);//转换后新的用户经纬度
            var pointA=new BMap.Point(data.points[0].lng,data.points[0].lat);//用户的经纬度
            var pointB=new BMap.Point(商家经度,商家纬度);//从数据库中取出商家的经纬度
            alert('您到商家的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位
          }
        }

        var convertor=new BMap.Convertor();
        var pointArr=[];
        pointArr.push(ggPoint);
        convertor.translate(pointArr, 1, 5, translateCallback)

    }

    function showError(error){
      switch(error.code) {
        case error.PERMISSION_DENIED:
          alert("用户不允许地理定位")
          break;
        case error.POSITION_UNAVAILABLE:
          alert("无法获取当前位置")
          break;
        case error.TIMEOUT:
          alert("操作超时")
          break;
        case error.UNKNOWN_ERROR:
          alert("未知错误")
          break;
        }
      }

    getLocation();

</script>复制代码

user.html运行效果图：

1、初次运行，询问是否共享位置信息

2、点击确认共享位置信息，弹出用户与商家的距离

总结

1、百度地图API也可定位用户的坐标经纬度，但是会出现偏移量，与实际位置相差很大，因此可使用HTML5地理定位用户的原始坐标，再将原始坐标转换成百度的定位坐标

2、由于HTML5地理定位仅限在移动端生效，因此使用HTML5地理定位需要在移动端下运行

最后

觉得文章不错的话，给我个关注哇，点个赞呗！

用场景:百度地图的应用往往都是在网上的开放式应用，用户在不同的城市，所以在地图初始化的时候会希望不同用户能够加载自己当地的地图。

下面给大家介绍两种利用百度地图API，在用户打开浏览器页面后自动初始化为用户所在地区地图的方法

根据IP定位用户位置(每一台连上网路的电脑都具有一个独一无二的IP位址，经由IP位址可以反查出电脑位置，但是结果并不精确，而且很容易到受到ISP的IP分配机制影响，而造成误差。本质上，LocalCity这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市。)
但是代码非常的简洁和方便,主要代码如下：

var map=new BMap.Map("allmap");

var myCity=new BMap.LocalCity();

myCity.get(myFun);

function myFun(result){

var cityName=result.name;

map.centerAndZoom(cityName,15);

setTimeout(function(){alert(cityName)},500);

}

</script>

运行效果如下：

2.Geolocation这个类是使用了支持HTML5浏览器提供的Geolocation API 来进行定位的。目前Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位（因为他们支持HTML5）。

var map=new BMap.Map("allmap");

var point=new BMap.Point(116.331398,39.897445);

map.centerAndZoom(point,12);

var geolocation=new BMap.Geolocation(); //实例化浏览器定位对象。

geolocation.getCurrentPosition(function(r){ //定位结果对象会传递给r变量

if(this.getStatus()==BMAP_STATUS_SUCCESS){ //通过Geolocation类的getStatus()判断定位结果

var mk=new BMap.Marker(r.point);

map.addOverlay(mk); //将marker作为覆盖物添加到map地图上

map.panTo(r.point); //移动地图中心点到当前点

setTimeout(function(){ alert('您的位置：'+r.point.lng+','+r.point.lat);},500);

}

else {alert('failed'+this.getStatus()); }

},{enableHighAccuracy: true}) //这个参数的含义就是是否要求浏览器获取最佳定位结果。