半个小时教你写一个装(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. Java并发案例03---生产者消费者问题02

    生产者消费者第二种情形 package com.maple.msb.one; public class ProducerConsumer { public static void main(Strin ...

  2. 1、Web Service-开始入坑（基础简介）

    1.关于Schema 具体介绍:https://baike.baidu.com/item/Schema/15286221?fr=aladdin 几个重要的知识点: 2.HTTP协议 具体介绍看博文:h ...

  3. Maven profile动态选择配置条件

    背景 在开发过程中,我们的软件会面对不同的运行环境,比如开发环境.测试环境.生产环境,而我们的软件在不同的环境中,有的配置可能会不一样,比如数据源配置.日志文件配置.以及一些软件运行过程中的基本配置, ...

  4. PAT——1032. 挖掘机技术哪家强

    为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第1行给出不超过105的正整数N,即参赛人数.随后N行,每行给出一位 ...

  5. [Zedboard Linux系统移植]-从MACHINE_START開始

    改动自:http://www.cnblogs.com/lknlfy/archive/2012/05/06/2486479.html 内核的启动过程? 3)内核的启动过程? arch/arm/kerne ...

  6. CCF认证201803-1 跳一跳

    import java.util.Scanner; public class Jump { public static void main(String[] args) { Scanner sc = ...

  7. LR分析-demo2

    0.LR分析 用一个栈来保存文法符号和状态的信息,一个字符串保存输入信息. 使用栈顶的状态符号和当前的输入符号来检索分析表,来决定移进-归约分析的动作. 1.样例文法 "E>E+T&q ...

  8. Linux 三剑客之sed命令总结

    sed ### sed ### .关键字取行 sed -n '/jpinsz/p' test.txt sed -n '/^d/p' test.txt .根据行数取行 sed -n '2,5p' tes ...

  9. linux 学习第十二天（网络会话connection、bond、ssh配置）

    一.网络会话 使用 con-name 参数指定公司所使用的网络会话名称company,然后依次用ifname 参 数指定本机的网卡名称,用autoconnect no 参数设置该网络会话默认不被自动激 ...

  10. 小白的Unity5之路(二)镜头平滑跟随角色

    这次要完成Camera跟随Player移动, 首先考虑Camera的跟随目标target和平滑移动速度smothing再考虑Camera与Player的偏移量(就是Camera与Player有一个永恒 ...