半个小时教你写一个装(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. C语言支持的四种变量存储类型

    http://blog.csdn.net/zhandoushi1982/article/details/5425835 一)auto:auto称为自动变量(局部变量).局部变量是指在函数内部说明的变量 ...

  2. [Python 网络编程] TCP Client (四)

    TCP Client 客户端编程步骤: 创建socket对象 连接到服务端的ip和port,connect()方法 传输数据 使用send.recv方法发送.接收数据 关闭连接,释放资源 最简单的客户 ...

  3. LayIM.AspNetCore Middleware 开发日记（七）Asp.Net.Core.SignalR闪亮登场

    前言   前几篇介绍了整个中间件的构成,路由,基本配置等等.基本上没有涉及到通讯部分.不过已经实现了融云的通讯功能,由于是第三方的就不在单独去写.正好.NET Core SignalR已经出来好久了, ...

  4. multimap详讲

    multimap和map的区别: 首先认识一下multimap和map的区别: 1>        multimap不提供operator[ ]运算符.因为这个运算符的语义在同一个键可以保存多个 ...

  5. 说说Vue.js的v-for

    v-for的话,相比传统的jQuery的  $.each或者for循环要简洁明了的多, 比如在Jquery中我要遍历数据,通常如下几种方式: $.each(apps, function(i, app) ...

  6. shell脚本排坑

    jenkins用来输出日志: tail -f  /tmp/i.log   & { sleep 15; eval 'kill -9 $!' &> /dev/null; } 去时间秒 ...

  7. python接口自动化读取json,yaml配置文件+封装requests+unittest+HTMLRunner实现全自动化

    # coding=utf-8 import json import requests class TestApi(object): """ /* @param: @ses ...

  8. 通讯协议（三）Protocol Buffers协议

    Protocol Buffers是Google开发一种数据描述语言,能够将结构化数据序列化,可用于数据存储.通信协议等方面. 不了解Protocol Buffers的同学可以把它理解为更快.更简单.更 ...

  9. PAT——1073. 多选题常见计分法(20)

    批改多选题是比较麻烦的事情,有很多不同的计分方法.有一种最常见的计分方法是:如果考生选择了部分正确选项,并且没有选择任何错误选项,则得到50%分数:如果考生选择了任何一个错误的选项,则不能得分.本题就 ...

  10. Swift基础学习笔记 一

    之前学习过一段时间swift,由于目前开发的项目还是用的OC,一段时间不看swift又基本忘干净了,好记性不如烂笔头,还是用博客记录一下自己学的东西吧. 基本数据类型: 1.常量(let)和变量(va ...