半个小时教你写一个装(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. 使用python编写svn钩子

    同上一篇trac中安装插件的文章的出发点一样,感觉用文档和口头制定规则在执行上会有偏差并且需要经常引导新人去熟悉规则. 所以,又费了几个小时去琢磨怎么改进svn提交代码的钩子,现有的钩子的功能比较简单 ...

  2. C语言文件操作总结

    文件的打开操作 fopen 打开一个文件,操作文件指针FILE * 文件的关闭操作 fclose 关闭一个文件 文件的读写操作 fgetc 从文件中读取一个字符 fputc 写一个字符到文件中去 fg ...

  3. PHP-----TP框架----命名空间

    TP框架----命名空间 命名空间,起什么作用??? [1]命名空间是一个虚拟的目录,这个文件有可能存在这个电脑里的任何一个地方,但是如果要把这个文件它的命名空间全部写成同一个那么这些文件就相当于在同 ...

  4. [19/05/01-星期三] GOF23_行为型模式(策略模式、模板方法模式)

    一.策略模式(strategy) [策略接口] /*** * "策略"接口 */ package cn.sxt.strategy; public interface Strateg ...

  5. Convolution1D与Convolution2D区别

    以下是Convolution1D的例子: # apply a convolution 1d of length 3 to a sequence with 10 timesteps, # with 64 ...

  6. CVPR2018_Crafting a Toolchain for Image Restoration by Deep Reinforcement Learning

    CVPR2018_Crafting a Toolchain for Image Restoration by Deep Reinforcement Learning http://mmlab.ie.c ...

  7. PAT——1057. 数零壹

    给定一串长度不超过105的字符串,本题要求你将其中所有英文字母的序号(字母a-z对应序号1-26,不分大小写)相加,得到整数N,然后再分析一下N的二进制表示中有多少0.多少1.例如给定字符串“PAT ...

  8. .Net Core应用程序发布时不同方式的差别

    .Net Core的文档更新的真是快..每次看的时候都觉得之前是不是梦游看的...每次发布应用程序的时候都要翻看下文档..至少rid是死活记不住.还是留个RID的索引吧..还有发布的索引 ,这样就好复 ...

  9. 多线程系列 - 基础篇01 - 线程基本概念 & 线程优先级 & 守护线程 60%

    1.什么是线程 将线程理解为轻量级进程,它与进程的最大的区别是: 多个线程共享一个进程资源: 对于OS的许多资源的分配和管理(如内存)通常都是进程级别的,线程只是os调度的最小单位: 相对于进程来说更 ...

  10. +QFTPOPEN: 603,0 怎么把这样一个字符串中的 603 提取出来给一个 uint32_t 的变量那

    +QFTPOPEN: 603,0   怎么把这样一个字符串中的 603 提取出来给一个 uint32_t 的变量那? 注意冒号后面有个空格!!! 答案:要使用 sscanf 标准库函数! char s ...