layout: post
title: 半个小时教你写一个毕设之地图搜租房
category: 其他
date: 2018-05-23
tags:
其他
半个小时教你写一个毕设之地图搜租房首先需要一个python3环境,怎么准备我就不多说了,实在不会的出门右转看一下廖雪峰老师的博客.
html部分代码来自:高德api+python解决租房问题,简单改了下加载数据部分
代码路径:/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> <p id="container"></p> <p class="control-panel"> <p class="control-entry"> <label>选择工作地点：</label> <p class="control-input"> <input id="work-location" type="text"> </p> </p> <p class="control-entry"> <label>选择通勤方式：</label> <p 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)" /> 地铁 </p> </p> </p> <p id="transfer-panel"></p> <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 = "<p>房源：<a target = '_blank' href='" + url + "'> + address + </a><p> 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
效果图:
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js中的json和math使用案例分析
easycanvas绘图库在pixeler项目开发中使用实战总结
promisea+的实现步骤详解
以上就是地图搜租房功能实现的详细内容。