Home >Web Front-end >JS Tutorial >Implementation of map search for rental properties

Implementation of map search for rental properties

php中世界最好的语言Original: 2018-05-24 15:02:334619browse

This time I will bring you the implementation of the map search for rental housing function. What are the precautions for the implementation of the map search for rental housing function? The following is a practical case, let's take a look.

layout: post
title: Teach you how to write a map to search for rentals in half an hour
category: Others
date: Implementation of map search for rental properties0Implementation of map search for rental properties8-05-Implementation of map search for rental properties3
tags:

Others

Teach you how to write a map to search for rentals in half an hourof map search for rental properties>

First you need a Python3 environment , I won’t say much about how to prepare. If you really don’t know how to go out, turn right and look at Teacher Liao Xuefeng’s blog.

HTML partof map search for rental properties>

Code comes from: Gaode API Python solves the problem of renting a house. Simply change the loading data part

Code path:/static/index.html


    <meta>
    <meta>
    <meta of map search for rental properties.0>
    <title>毕业生租房</title>
    <link of map search for rental propertiesimplementation properties9.css>
    <link>
    <script of map search for rental properties.9.implementation properties.js></script>
    <script></script>
    <script of map search for rental properties.3 propertiesimplementation propertiesd38implementation properties6eimplementation properties07fimplementation properties9999implementation properties666d64implementation propertiesfa069implementation properties></script>
    <script></script>
    <style>
    .control-panel {
        position: absolute;
        top: 30px;
        right: Implementation of map search for rental properties0px;
    }
    
    .control-entry {
        width: Implementation of map search for rental properties80px;
        background-color: rgba(Implementation of map search for rental propertiesImplementation of map search for rental properties9, Implementation of map search for rental properties36, Implementation of map search for rental properties53, 0.8);
        font-family: fantasy, sans-serif;
        text-align: left;
        color: white;
        overflow: auto;
        padding: Implementation of map search for rental properties0px;
        margin-bottom: Implementation of map search for rental properties0px;
    }
    
    .control-input {
        margin-left: Implementation of map search for rental propertiesImplementation of map search for rental properties0px;
    }
    
    .control-input input[type="text"] {
        width: Implementation of map search for rental properties60px;
    }
    
    .control-panel label {
        float: left;
        width: Implementation of map search for rental propertiesImplementation of map search for rental properties0px;
    }
    
    #transfer-panel {
        position: absolute;
        background-color: white;
        max-height: 80%;
        overflow-y: auto;
        top: 30px;
        left: Implementation of map search for rental properties0px;
        width: Implementation of map search for rental properties50px;
    }
    </style>


    <p></p>
    <p>
        </p><p>
            <label>选择工作地点：</label>
            </p><p>
                <input>
            </p>
        
        <p>
            <label>选择通勤方式：</label>
            </p><p>
                <input> 公交+地铁
                <input> 地铁
            </p>
        
    
    <p></p>
    <script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoomEnable: true,
        center: [Implementation of map search for rental propertiesImplementation of map search for rental properties6.3974Implementation of map search for rental properties8, 39.909Implementation of map search for rental properties3],
        zoom: Implementation of map search for rental propertiesImplementation of map search for rental properties
    });
    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: &#39;http://webapi.amap.com/theme/vImplementation of map search for rental properties.3/markers/n/mark_r.png&#39;,
            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: Implementation of map search for rental properties
                    });
                    polygon.setPath(result.bounds[i]);
                    polygonArray.push(polygon);
                }
            }
        }, {
            policy: v
        });
    }
    function addMarkerByAddress(address, url) {
        var geocoder = new AMap.Geocoder({
            city: "北京",
            radius: Implementation of map search for rental properties000
        });
        geocoder.getLocation(address, function(status, result) {
            if (status === "complete" && result.info === &#39;OK&#39;) {
                var geocode = result.geocodes[0];
                rentMarker = new AMap.Marker({
                    map: map,
                    title: address,
                    icon: &#39;http://webapi.amap.com/theme/vImplementation of map search for rental properties.3/markers/n/mark_b.png&#39;,
                    position: [geocode.location.getLng(), geocode.location.getLat()]
                });
                rentMarkerArray.push(rentMarker);
                rentMarker.content = "<p>房源：<a target = &#39;_blank&#39; href=&#39;" + url + "&#39;>" + address + "<p>"
                rentMarker.on(&#39;click&#39;, 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: &#39;transfer-panel&#39;
                    });
                    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: Implementation of map search for rental properties000
        });
        geocoder.getLocation(workAddress, function(status, result) {
            if (status === "complete" && result.info === &#39;OK&#39;) {
                var geocode = result.geocodes[0];
                x = geocode.location.getLng();
                y = geocode.location.getLat();
                loadWorkMarker(x, y);
                loadWorkRange(x, y, 60, "#3f67a5", vehicle);
                map.setZoomAndCenter(Implementation of map search for rental propertiesImplementation of map search for rental properties, [x, y]);
            }
        })
    }
    $(function()
    {
        $.get("/get_houses", function(data) {
            data.forEach(function(element, index) {
                addMarkerByAddress(element.address, element.url);
            });
        });
    })
    </script>

Python flask partof map search for rental properties>

Python3 Environment, use to install Flask, pymysql, BeautifulSoup

pip install Flask;
pip install pymysql;
pip install beautifulsoup4;
pip install requests;

and then directly upload the code.

Path:/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='Implementation of map search for rental propertiesImplementation of map search for rental properties7.0.0.Implementation of map search for rental properties',
                                 user='root',
                                 password='Implementation of map search for rental propertiesImplementation of map search for rental properties3',
                                 db='你的数据库名字',
                                 charset='utf8mb4',
                                 cursorclass=pymysql.cursors.DictCursor)
    try:
        with connection.cursor() as cursor:
            # Read a single record
            sql = "SELECT 你的URL字段,你的地址字段 FROM 你的房源数据表 where Implementation of map search for rental properties=Implementation of map search for rental properties;"
            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(Implementation of map search for rental properties, Implementation of map search for rental properties0):
        url = "%s/pinpaigongyu/pn/%d/" % (city_url, page_num)
        headers = {
            'connection': "keep-alive",
            'upgrade-insecure-requests': "Implementation of map search for rental properties",
            'user-agent': "Mozilla/5.0 (Macintosh; Intel Mac OS X Implementation of map search for rental properties0_Implementation of map search for rental properties3_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.Implementation of map search for rental properties8Implementation of map search for rental properties 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-45Implementation of map search for rental propertiesc-b6be-974f90Implementation of map search for rental properties970Implementation of map search for rental properties0; new_uv=Implementation of map search for rental properties; utm_source=; spm=; init_refer=https%Implementation of map search for rental properties53A%Implementation of map search for rental properties5Implementation of map search for rental propertiesF%Implementation of map search for rental properties5Implementation of map search for rental propertiesFcn.bing.com%Implementation of map search for rental properties5Implementation of map search for rental propertiesF; als=0; f=n; new_session=0; qz_gdt=; Hm_lvt_dcee4f66dfImplementation of map search for rental properties8844Implementation of map search for rental propertiesImplementation of map search for rental propertiesImplementation of map search for rental propertiesef0479976aabfImplementation of map search for rental properties=Implementation of map search for rental properties5Implementation of map search for rental properties703Implementation of map search for rental propertiesImplementation of map search for rental properties64,Implementation of map search for rental properties5Implementation of map search for rental properties703Implementation of map search for rental propertiesImplementation of map search for rental properties67,Implementation of map search for rental properties5Implementation of map search for rental properties703Implementation of map search for rental propertiesImplementation of map search for rental properties70,Implementation of map search for rental properties5Implementation of map search for rental properties703Implementation of map search for rental properties380; Hm_lpvt_dcee4f66dfImplementation of map search for rental properties8844Implementation of map search for rental propertiesImplementation of map search for rental propertiesImplementation of map search for rental propertiesef0479976aabfImplementation of map search for rental properties=Implementation of map search for rental properties5Implementation of map search for rental properties703Implementation of map search for rental properties4Implementation of map search for rental propertiesImplementation of map search for rental properties; ppStore_fingerprint=3Implementation of map search for rental properties83C7698Implementation of map search for rental propertiesCCDImplementation of map search for rental properties090B4Implementation of map search for rental propertiesACBBF6Implementation of map search for rental properties4A4C96Implementation of map search for rental properties3FE967CDC69C58%EF%BC%BFImplementation of map search for rental properties5Implementation of map search for rental properties703Implementation of map search for rental properties4Implementation of map search for rental properties0843",
            '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("hImplementation of map search for rental properties").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

Rendering:

Implementation of map search for rental properties

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Implementation of map search for rental properties

Related articles