Maison >interface Web >js tutoriel >Mise en place de la recherche cartographique des biens locatifs
Cette fois je vous présente la mise en place de la fonction de recherche cartographique de logement locatif. Quelles sont les précautions pour mettre en œuvre la fonction de recherche cartographique de logement locatif Voici des cas pratiques, prenons ? un regard.
mise en page : publication
titre : Apprenez à rédiger une carte pour rechercher des locations en une demi-heure
catégorie : Autres
date : Mise en place de la recherche cartographique des biens locatifs3/05/Mise en place de la recherche cartographique des biens locatifs0Mise en place de la recherche cartographique des biens locatifs8
tags :
Autres
Premier vous avez besoin d'un environnement Python3, je ne dirai pas grand-chose sur la façon de vous préparer. Si vous ne savez vraiment pas comment sortir, tournez à droite et jetez un œil au blog du professeur Liao Xuefeng
<meta> <meta> <meta en place de la recherche cartographique des biens locatifs.0> <title>毕业生租房</title> <link en place de la recherche cartographique des biens locatifsmise locatifs9.css> <link> <script en place de la recherche cartographique des biens locatifs.9.mise locatifs.js></script> <script></script> <script en place de la recherche cartographique des biens locatifs.3 locatifsmise locatifsd38mise locatifs6emise locatifs07fmise locatifs9999mise locatifs666d64mise locatifsfa069mise locatifs></script> <script></script> <style> .control-panel { position: absolute; top: 30px; right: Mise en place de la recherche cartographique des biens locatifs0px; } .control-entry { width: Mise en place de la recherche cartographique des biens locatifs80px; background-color: rgba(Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs9, Mise en place de la recherche cartographique des biens locatifs36, Mise en place de la recherche cartographique des biens locatifs53, 0.8); font-family: fantasy, sans-serif; text-align: left; color: white; overflow: auto; padding: Mise en place de la recherche cartographique des biens locatifs0px; margin-bottom: Mise en place de la recherche cartographique des biens locatifs0px; } .control-input { margin-left: Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs0px; } .control-input input[type="text"] { width: Mise en place de la recherche cartographique des biens locatifs60px; } .control-panel label { float: left; width: Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs0px; } #transfer-panel { position: absolute; background-color: white; max-height: 80%; overflow-y: auto; top: 30px; left: Mise en place de la recherche cartographique des biens locatifs0px; width: Mise en place de la recherche cartographique des biens locatifs50px; } </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: [Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs6.3974Mise en place de la recherche cartographique des biens locatifs8, 39.909Mise en place de la recherche cartographique des biens locatifs3], zoom: Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs }); 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/vMise en place de la recherche cartographique des biens locatifs.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: Mise en place de la recherche cartographique des biens locatifs }); polygon.setPath(result.bounds[i]); polygonArray.push(polygon); } } }, { policy: v }); } function addMarkerByAddress(address, url) { var geocoder = new AMap.Geocoder({ city: "北京", radius: Mise en place de la recherche cartographique des biens locatifs000 }); 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/vMise en place de la recherche cartographique des biens locatifs.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 + "<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: Mise en place de la recherche cartographique des biens locatifs000 }); 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(Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs, [x, y]); } }) } $(function() { $.get("/get_houses", function(data) { data.forEach(function(element, index) { addMarkerByAddress(element.address, element.url); }); }); }) </script>Partie Python flask
pip install Flask; pip install pymysql; pip install beautifulsoup4; pip install requests;puis coder directement. Chemin :/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='Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs7.0.0.Mise en place de la recherche cartographique des biens locatifs', user='root', password='Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs3', db='你的数据库名字', charset='utf8mb4', cursorclass=pymysql.cursors.DictCursor) try: with connection.cursor() as cursor: # Read a single record sql = "SELECT 你的URL字段,你的地址字段 FROM 你的房源数据表 where Mise en place de la recherche cartographique des biens locatifs=Mise en place de la recherche cartographique des biens locatifs;" 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(Mise en place de la recherche cartographique des biens locatifs, Mise en place de la recherche cartographique des biens locatifs0): url = "%s/pinpaigongyu/pn/%d/" % (city_url, page_num) headers = { 'connection': "keep-alive", 'upgrade-insecure-requests': "Mise en place de la recherche cartographique des biens locatifs", 'user-agent': "Mozilla/5.0 (Macintosh; Intel Mac OS X Mise en place de la recherche cartographique des biens locatifs0_Mise en place de la recherche cartographique des biens locatifs3_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.Mise en place de la recherche cartographique des biens locatifs8Mise en place de la recherche cartographique des biens locatifs 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-45Mise en place de la recherche cartographique des biens locatifsc-b6be-974f90Mise en place de la recherche cartographique des biens locatifs970Mise en place de la recherche cartographique des biens locatifs0; new_uv=Mise en place de la recherche cartographique des biens locatifs; utm_source=; spm=; init_refer=https%Mise en place de la recherche cartographique des biens locatifs53A%Mise en place de la recherche cartographique des biens locatifs5Mise en place de la recherche cartographique des biens locatifsF%Mise en place de la recherche cartographique des biens locatifs5Mise en place de la recherche cartographique des biens locatifsFcn.bing.com%Mise en place de la recherche cartographique des biens locatifs5Mise en place de la recherche cartographique des biens locatifsF; als=0; f=n; new_session=0; qz_gdt=; Hm_lvt_dcee4f66dfMise en place de la recherche cartographique des biens locatifs8844Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifsef0479976aabfMise en place de la recherche cartographique des biens locatifs=Mise en place de la recherche cartographique des biens locatifs5Mise en place de la recherche cartographique des biens locatifs703Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs64,Mise en place de la recherche cartographique des biens locatifs5Mise en place de la recherche cartographique des biens locatifs703Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs67,Mise en place de la recherche cartographique des biens locatifs5Mise en place de la recherche cartographique des biens locatifs703Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs70,Mise en place de la recherche cartographique des biens locatifs5Mise en place de la recherche cartographique des biens locatifs703Mise en place de la recherche cartographique des biens locatifs380; Hm_lpvt_dcee4f66dfMise en place de la recherche cartographique des biens locatifs8844Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifsef0479976aabfMise en place de la recherche cartographique des biens locatifs=Mise en place de la recherche cartographique des biens locatifs5Mise en place de la recherche cartographique des biens locatifs703Mise en place de la recherche cartographique des biens locatifs4Mise en place de la recherche cartographique des biens locatifsMise en place de la recherche cartographique des biens locatifs; ppStore_fingerprint=3Mise en place de la recherche cartographique des biens locatifs83C7698Mise en place de la recherche cartographique des biens locatifsCCDMise en place de la recherche cartographique des biens locatifs090B4Mise en place de la recherche cartographique des biens locatifsACBBF6Mise en place de la recherche cartographique des biens locatifs4A4C96Mise en place de la recherche cartographique des biens locatifs3FE967CDC69C58%EF%BC%BFMise en place de la recherche cartographique des biens locatifs5Mise en place de la recherche cartographique des biens locatifs703Mise en place de la recherche cartographique des biens locatifs4Mise en place de la recherche cartographique des biens locatifs0843", '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("hMise en place de la recherche cartographique des biens locatifs").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.pyRendu :
Analyse de cas d'utilisation JSON et Math dans JS
La bibliothèque de dessins EasyCanvas est en cours de développement dans Pixelr projet Résumé de l'utilisation pratique
Explication détaillée des étapes de mise en œuvre de PromiseA+
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!