半个小时教你写一个装(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. sed.md

    SED sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用s ...

  2. Android如何自学----转自lavor从segmentfault

    如何自学Android 1. Java知识储备 本知识点不做重点讲解: 对于有基础的同学推荐看<Java编程思想>,巩固基础,查漏补全,了解并熟悉更多细节知识点. 对于没有基础的同学推荐看 ...

  3. 【[SCOI2016]背单词】

    这是一道贪心题 刚开始yy出来一个比较\(sb\)的贪心 之后发现它错了 首先这道题得先把题面翻译成人话 如果存在一个单词是它的后缀,且当前没被填入,代价为\(n*n\): 如果不存在一个单词是它的后 ...

  4. appium ios Demo

    Appium Demo 录制图片,环境搭建完毕后根据视频基本能利用模拟器完成简单测试用例 感谢大神http://www.cnblogs.com/tobecrazy/p/4970188.html

  5. background-clip 实现字体渐变效果

    background-clip 实现字体渐变效果 (一)类似KTV字幕效果 @-webkit-keyframes loop{ 0%{background-position: -800px 0;} 10 ...

  6. CS 20_Overview of Tensorflow

    tf.assign(A, new_number): 这个函数的功能主要是把new_number的值向前传递给了A run( fetches, feed_dict=None, options=None, ...

  7. PAT——1033. 旧键盘打字

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在2行中分别给出坏掉的那些键.以及应该输入的文 ...

  8. 分享一个ASP.NET的弹出层，比较好用！

    网上的一些弹出层的控件多了去了,我很久之前用了一个,效果还不错,但如果应用到ASP.NET的话,会出现“弹出层内的控件runat='server'失效”的情况,具体情况我也不太会描述,但就是那些onc ...

  9. 提交json串格式的POST请求

    提交json串格式的POST请求 Action() { web_reg_save_param("retCode", "LB=retCode\":\"& ...

  10. pl/sql下载

    详解Oracle客户端工具:PL/SQL工具下载: 下载地址:http://www.oraclejsq.com/article/010100114.html