半个小时教你写一个装(bi)逼(she)之地图搜租房

首先需要一个Python3环境,怎么准备我就不多说了,实在不会的出门右转看一下廖雪峰老师的博客.

HTML部分

代码路径:/static/index.html

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>毕业生租房</title>

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/jquery.range.css" />

    <script src="http://cache.amap.com/lbs/static/jquery-1.9.1.js"></script>

    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>

    <script src="http://webapi.amap.com/maps?v=1.3&key=22d3816e107f199992666d6412fa0691&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"></script>

    <script src="http://cache.amap.com/lbs/static/jquery.range.js"></script>

    <style>

    .control-panel {

        position: absolute;

        top: 30px;

        right: 20px;

    }

    .control-entry {

        width: 280px;

        background-color: rgba(119, 136, 153, 0.8);

        font-family: fantasy, sans-serif;

        text-align: left;

        color: white;

        overflow: auto;

        padding: 10px;

        margin-bottom: 10px;

    }

    .control-input {

        margin-left: 120px;

    }

    .control-input input[type="text"] {

        width: 160px;

    }

    .control-panel label {

        float: left;

        width: 120px;

    }

    #transfer-panel {

        position: absolute;

        background-color: white;

        max-height: 80%;

        overflow-y: auto;

        top: 30px;

        left: 20px;

        width: 250px;

    }

    </style>

</head>

<body>

    <div id="container"></div>

    <div class="control-panel">

        <div class="control-entry">

            <label>选择工作地点：</label>

            <div class="control-input">

                <input id="work-location" type="text">

            </div>

        </div>

        <div class="control-entry">

            <label>选择通勤方式：</label>

            <div class="control-input">

                <input type="radio" name="vehicle" value="SUBWAY,BUS" onClick="takeBus(this)" checked/> 公交+地铁

                <input type="radio" name="vehicle" value="SUBWAY" onClick="takeSubway(this)" /> 地铁

            </div>

        </div>

    </div>

    <div id="transfer-panel"></div>

    <script>

    var map = new AMap.Map("container", {

        resizeEnable: true,

        zoomEnable: true,

        center: [116.397428, 39.90923],

        zoom: 11

    });

    var scale = new AMap.Scale();

    map.addControl(scale);

    var arrivalRange = new AMap.ArrivalRange();

    var x, y, t, vehicle = "SUBWAY,BUS";

    var workAddress, workMarker;

    var rentMarkerArray = [];

    var polygonArray = [];

    var amapTransfer;

    var infoWindow = new AMap.InfoWindow({

        offset: new AMap.Pixel(0, -30)

    });

    var auto = new AMap.Autocomplete({

        input: "work-location"

    });

    AMap.event.addListener(auto, "select", workLocationSelected);

    function takeBus(radio) {

        vehicle = radio.value;

        loadWorkLocation()

    }

    function takeSubway(radio) {

        vehicle = radio.value;

        loadWorkLocation()

    }

    function workLocationSelected(e) {

        workAddress = e.poi.name;

        loadWorkLocation();

    }

    function loadWorkMarker(x, y, locationName) {

        workMarker = new AMap.Marker({

            map: map,

            title: locationName,

            icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',

            position: [x, y]

        });

    }

    function loadWorkRange(x, y, t, color, v) {

        arrivalRange.search([x, y], t, function(status, result) {

            if (result.bounds) {

                for (var i = 0; i < result.bounds.length; i++) {

                    var polygon = new AMap.Polygon({

                        map: map,

                        fillColor: color,

                        fillOpacity: "0.4",

                        strokeColor: color,

                        strokeOpacity: "0.8",

                        strokeWeight: 1

                    });

                    polygon.setPath(result.bounds[i]);

                    polygonArray.push(polygon);

                }

            }

        }, {

            policy: v

        });

    }

    function addMarkerByAddress(address, url) {

        var geocoder = new AMap.Geocoder({

            city: "北京",

            radius: 1000

        });

        geocoder.getLocation(address, function(status, result) {

            if (status === "complete" && result.info === 'OK') {

                var geocode = result.geocodes[0];

                rentMarker = new AMap.Marker({

                    map: map,

                    title: address,

                    icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',

                    position: [geocode.location.getLng(), geocode.location.getLat()]

                });

                rentMarkerArray.push(rentMarker);

                rentMarker.content = "<div>房源：<a target = '_blank' href='" + url + "'>" + address + "</a><div>"

                rentMarker.on('click', function(e) {

                    infoWindow.setContent(e.target.content);

                    infoWindow.open(map, e.target.getPosition());

                    if (amapTransfer) amapTransfer.clear();

                    amapTransfer = new AMap.Transfer({

                        map: map,

                        policy: AMap.TransferPolicy.LEAST_TIME,

                        city: "北京市",

                        panel: 'transfer-panel'

                    });

                    amapTransfer.search([{

                        keyword: workAddress

                    }, {

                        keyword: address

                    }], function(status, result) {})

                });

            }

        })

    }

    function delWorkLocation() {

        if (polygonArray) map.remove(polygonArray);

        if (workMarker) map.remove(workMarker);

        polygonArray = [];

    }

    function delRentLocation() {

        if (rentMarkerArray) map.remove(rentMarkerArray);

        rentMarkerArray = [];

    }

    function loadWorkLocation() {

        delWorkLocation();

        var geocoder = new AMap.Geocoder({

            city: "北京",

            radius: 1000

        });

        geocoder.getLocation(workAddress, function(status, result) {

            if (status === "complete" && result.info === 'OK') {

                var geocode = result.geocodes[0];

                x = geocode.location.getLng();

                y = geocode.location.getLat();

                loadWorkMarker(x, y);

                loadWorkRange(x, y, 60, "#3f67a5", vehicle);

                map.setZoomAndCenter(12, [x, y]);

            }

        })

    }

    $(function()

    {

        $.get("/get_houses", function(data) {

            data.forEach(function(element, index) {

                addMarkerByAddress(element.address, element.url);

            });

        });

    })

    </script>

</body>

</html>

Python flask部分

Python3环境,使用安装Flask,pymysql,BeautifulSoup

pip install Flask;

pip install pymysql;

pip install beautifulsoup4;

pip install requests;

然后直接上代码咯.

路径:/app.py



from flask import Flask, request

from flask import jsonify

from flask import render_template

from flask import Response

import requests

from bs4 import BeautifulSoup

import pymysql

app = Flask(__name__)

@app.route("/get_houses_db/")

def get_houses_db():

    # 从数据库读出来的数据,url为房源url,address为房源定位地址

    houses = []

    # Connect to the database

    connection = pymysql.connect(host='127.0.0.1',

                                 user='root',

                                 password='123',

                                 db='你的数据库名字',

                                 charset='utf8mb4',

                                 cursorclass=pymysql.cursors.DictCursor)

    try:

        with connection.cursor() as cursor:

            # Read a single record

            sql = "SELECT 你的URL字段,你的地址字段 FROM 你的房源数据表 where 1=1;"

            keyword = request.args.get('keyword')

            if keyword is not None:

                sql = sql + "查询字段 like %%s%" % keyword

            cursor.execute(sql)

            houses = cursor.fetchall()

    finally:

        connection.close()

    return jsonify(houses)

@app.route("/get_houses", methods=['POST', 'GET'])

def get_houses():

    # 直接从网页获取数据,url为房源url,address为房源定位地址

    houses = []

    city = request.args.get('city')

    if city is None:

        city = 'bj'

    city_url = 'http://%s.58.com' % city

    for page_num in range(1, 10):

        url = "%s/pinpaigongyu/pn/%d/" % (city_url, page_num)

        headers = {

            'connection': "keep-alive",

            'upgrade-insecure-requests': "1",

            'user-agent': "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36",

            'accept': "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",

            'accept-encoding': "gzip, deflate",

            'accept-language': "zh-CN,zh;q=0.9,en;q=0.8,da;q=0.7",

            'cookie': "f=n; f=n; id58=c5/njVsEqPqC7y9vB/RHAg==; 58tj_uuid=ac94c044-cbb8-451c-b6be-974f90197010; new_uv=1; utm_source=; spm=; init_refer=https%253A%252F%252Fcn.bing.com%252F; als=0; f=n; new_session=0; qz_gdt=; Hm_lvt_dcee4f66df28844222ef0479976aabf1=1527032264,1527032267,1527032270,1527032380; Hm_lpvt_dcee4f66df28844222ef0479976aabf1=1527032421; ppStore_fingerprint=3283C76981CCD1090B42ACBBF624A4C9613FE967CDC69C58%EF%BC%BF1527032420843",

            'cache-control': "no-cache",

        }

        response = requests.request("GET", url, headers=headers)

        htmlSoup = BeautifulSoup(response.text, "html.parser")

        ul = htmlSoup.find(attrs={"class": "list"})

        if ul is None:

            continue

        li_list = ul.find_all("li")

        if li_list is None:

            continue

        for li in li_list:

            house = {}

            house['url'] = '%s/%s' % (city_url, li.find("a")['href'])

            house['address'] = li.find("h2").text

            houses.append(house)

    return jsonify(houses)

@app.route('/')

def index():

    return app.send_static_file('index.html')

if __name__ == '__main__':

    app.run(port=8888)

# python3 安装flask之后,安装命令pip install Flask

# 运行 python app.py

效果图:



然后...

写完了...

下次见...

半个小时教你写一个装(bi)逼(she)之地图搜租房的更多相关文章

  1. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  2. 【vps】教你写一个属于自己的随机图API

    [vps]教你写一个自己的随机图API 前言 刚刚开始使用halo博客的时候,我就发现halo博客系统是可以使用随机图当背景的,所以也是使用了网上一些比较火的随机图API. 在上次发现了各种图片API ...

  3. 手把手教你写一个java的orm（五）

    生成sql:where 上一篇里我们实现了生成insert的sql,下面要开始实现update,delete,select的sql语句了.但是这些语句有一个比较麻烦的地方是:它们一般后面都会有wher ...

  4. Istio技术与实践04：最佳实践之教你写一个完整的Mixer Adapter

    Istio内置的部分适配器以及相应功能举例如下: circonus:微服务监控分析平台. cloudwatch:针对AWS云资源监控的工具. fluentd:开源的日志采集工具. prometheus ...

  5. 教你写一个Android可快速复用的小键盘输入控件

    引子 在Android项目开发中特别是一些稍大型的项目,面对需求文档的时候你经常会发现很多地方用到了同样的组件,但是又略有不同.比如这个: 右边是一个小键盘输入板,左边当焦点不同的时候分别用右边的小键 ...

  6. 手把手教你写一个java的orm（一）

    写之前的说明 其实吧. 这个东西已经写好了,地址在:https://github.com/hjx601496320/JdbcPlus 这系列文章算是我写的过程的总结吧.(恩系列,说明我可能会写好久,╮ ...

  7. 手把手教你写一个RPC

    1.1 RPC 是什么 定义:RPC(Remote Procedure Call Protocol)--远程过程调用协议 ,RPC协议假定某些传输协议的存在,如TCP或UDP,为通信程序之间携带信息数 ...

  8. 80行代码教你写一个Webpack插件并发布到npm

    1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...

  9. 让我手把手教你写一个强大、方便使用的 IOC 容器

    一.介绍 1.介绍 最近无聊,也没什么事做,没事做总是要给自己找点事情做吧,毕竟人的生活在与折腾.于是,决定自己手动写一个 IOC 的框架.我们知道在 NetCore 的版本里面已经内置了 IOC 容 ...

随机推荐

  1. caanimationgroup与CATransaction的区别

    动画的组合: caanimationgroup:同一个layer: CATransaction:不同layer: In Core Animation, transactions are a way t ...

  2. P3177 [HAOI2015]树上染色

    题目描述 有一棵点数为 N 的树,树边有边权.给你一个在 0~ N 之内的正整数 K ,你要在这棵树中选择 K个点,将其染成黑色,并将其他 的N-K个点染成白色 . 将所有点染色后,你会获得黑点两两之 ...

  3. 2018.09.15模拟总结（T1，T3）

    过了一周,终于迎来了第二次模拟(这不是期待的语气),看第一周毒瘤程度,我就觉得接下来的模拟只能更毒瘤. 花了10多分钟读完了三道题,觉得暴力还是挺好写的,然后在每一道题都思索那么几分钟后,觉得还是写暴 ...

  4. Kali-linux使用Wifite破解无线网络

    一些破解无线网络程序是使用Aircrack-ng工具集,并添加了一个图形界面或使用文本菜单的形式来破解无线网络.这使得用户使用它们更容易,而且不需要记住任何命令.本节将介绍使用命令行工具Wifite, ...

  5. Bootstrap--模仿官网写一个页面

    本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage ...

  6. 【问题】 cookie 不保存特殊字符 解决办法

    遇到的问题: 在做项目,用geolocation 获取经纬度,格式如(23.1133,113.2552) ,想保存到cookie中备用.但读取cookie出来之后发现逗号变成了  %2c. 找到的原因 ...

  7. QTP基本方法4------手动写入信息到测试结果报告中

    可以使用写代码的方式添加结果信息到测试结果报告中. 结构:reporter.ReportEvent result,object,details,path result:状态:4种状态:micPass. ...

  8. csv文件的使用，csv空白行问题

    首先w+和wb区别 两者都是用于以只写方式打开指定文件指定文件原来不存在,则在打开时由系统新建一个以指定文件名命名的文件,如果原来已存在一个以该文件名命名的文件,则在打开时将该文件删去,然后重新建立一 ...

  9. css z-index之object flash层级问题

    <object type="application/x-shockwave-flash" data="flash文件路径" style="z-i ...

  10. web性能优化之GZIP压缩

    从服务端优化来说,通过对服务端做压缩配置可以大大减小文本文件的体积,从而使加载文本的速度成倍的加快.目前比较通用的压缩方法是启用gzip压缩.它会把浏览器请求的页面,以及页面中引用的静态资源以压缩包的 ...