이번에는 임대용 지도 검색 기능 구현을 가져오겠습니다. 지도 검색 기능 구현 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
layout: post
title: 임대 검색을 위한 지도 작성 방법을 가르치는 30분 임대 검색을 위한 지도를 작성하려면 먼저 Python3 환경이 필요합니다. 어떻게 준비해야 할지 모르겠다면 오른쪽으로 돌아서 Liao Xuefeng 선생님의 블로그를 보세요.
HTML part
<meta>
<meta>
<meta>
<title>毕业生租房</title>
<link>
<link>
<script></script>
<script></script>
<script></script>
<script></script>
<style>
.control-panel {
position: absolute;
top: 30px;
right: 임대 매물에 대한 지도 검색 구현0px;
}
.control-entry {
width: 임대 매물에 대한 지도 검색 구현80px;
background-color: rgba(임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현9, 임대 매물에 대한 지도 검색 구현36, 임대 매물에 대한 지도 검색 구현53, 0.8);
font-family: fantasy, sans-serif;
text-align: left;
color: white;
overflow: auto;
padding: 임대 매물에 대한 지도 검색 구현0px;
margin-bottom: 임대 매물에 대한 지도 검색 구현0px;
}
.control-input {
margin-left: 임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현0px;
}
.control-input input[type="text"] {
width: 임대 매물에 대한 지도 검색 구현60px;
}
.control-panel label {
float: left;
width: 임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현0px;
}
#transfer-panel {
position: absolute;
background-color: white;
max-height: 80%;
overflow-y: auto;
top: 30px;
left: 임대 매물에 대한 지도 검색 구현0px;
width: 임대 매물에 대한 지도 검색 구현50px;
}
</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: [임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현6.3974임대 매물에 대한 지도 검색 구현8, 39.909임대 매물에 대한 지도 검색 구현3],
zoom: 임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현
});
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/v임대 매물에 대한 지도 검색 구현.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: 임대 매물에 대한 지도 검색 구현
});
polygon.setPath(result.bounds[i]);
polygonArray.push(polygon);
}
}
}, {
policy: v
});
}
function addMarkerByAddress(address, url) {
var geocoder = new AMap.Geocoder({
city: "北京",
radius: 임대 매물에 대한 지도 검색 구현000
});
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/v임대 매물에 대한 지도 검색 구현.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: 임대 매물에 대한 지도 검색 구현000
});
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(임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현, [x, y]);
}
})
}
$(function()
{
$.get("/get_houses", function(data) {
data.forEach(function(element, index) {
addMarkerByAddress(element.address, element.url);
});
});
})
</script>
Python3 환경, Flask, pymysql, BeautifulSoup
pip install Flask; pip install pymysql; pip install beautifulsoup4; pip install requests;
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='임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현7.0.0.임대 매물에 대한 지도 검색 구현',
user='root',
password='임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현3',
db='你的数据库名字',
charset='utf8mb4',
cursorclass=pymysql.cursors.DictCursor)
try:
with connection.cursor() as cursor:
# Read a single record
sql = "SELECT 你的URL字段,你的地址字段 FROM 你的房源数据表 where 임대 매물에 대한 지도 검색 구현=임대 매물에 대한 지도 검색 구현;"
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(임대 매물에 대한 지도 검색 구현, 임대 매물에 대한 지도 검색 구현0):
url = "%s/pinpaigongyu/pn/%d/" % (city_url, page_num)
headers = {
'connection': "keep-alive",
'upgrade-insecure-requests': "임대 매물에 대한 지도 검색 구현",
'user-agent': "Mozilla/5.0 (Macintosh; Intel Mac OS X 임대 매물에 대한 지도 검색 구현0_임대 매물에 대한 지도 검색 구현3_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.임대 매물에 대한 지도 검색 구현8임대 매물에 대한 지도 검색 구현 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-45임대 매물에 대한 지도 검색 구현c-b6be-974f90임대 매물에 대한 지도 검색 구현970임대 매물에 대한 지도 검색 구현0; new_uv=임대 매물에 대한 지도 검색 구현; utm_source=; spm=; init_refer=https%임대 매물에 대한 지도 검색 구현53A%임대 매물에 대한 지도 검색 구현5임대 매물에 대한 지도 검색 구현F%임대 매물에 대한 지도 검색 구현5임대 매물에 대한 지도 검색 구현Fcn.bing.com%임대 매물에 대한 지도 검색 구현5임대 매물에 대한 지도 검색 구현F; als=0; f=n; new_session=0; qz_gdt=; Hm_lvt_dcee4f66df임대 매물에 대한 지도 검색 구현8844임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현ef0479976aabf임대 매물에 대한 지도 검색 구현=임대 매물에 대한 지도 검색 구현5임대 매물에 대한 지도 검색 구현703임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현64,임대 매물에 대한 지도 검색 구현5임대 매물에 대한 지도 검색 구현703임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현67,임대 매물에 대한 지도 검색 구현5임대 매물에 대한 지도 검색 구현703임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현70,임대 매물에 대한 지도 검색 구현5임대 매물에 대한 지도 검색 구현703임대 매물에 대한 지도 검색 구현380; Hm_lpvt_dcee4f66df임대 매물에 대한 지도 검색 구현8844임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현ef0479976aabf임대 매물에 대한 지도 검색 구현=임대 매물에 대한 지도 검색 구현5임대 매물에 대한 지도 검색 구현703임대 매물에 대한 지도 검색 구현4임대 매물에 대한 지도 검색 구현임대 매물에 대한 지도 검색 구현; ppStore_fingerprint=3임대 매물에 대한 지도 검색 구현83C7698임대 매물에 대한 지도 검색 구현CCD임대 매물에 대한 지도 검색 구현090B4임대 매물에 대한 지도 검색 구현ACBBF6임대 매물에 대한 지도 검색 구현4A4C96임대 매물에 대한 지도 검색 구현3FE967CDC69C58%EF%BC%BF임대 매물에 대한 지도 검색 구현5임대 매물에 대한 지도 검색 구현703임대 매물에 대한 지도 검색 구현4임대 매물에 대한 지도 검색 구현0843",
'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("h임대 매물에 대한 지도 검색 구현").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.pyRendering:
JS의 JSON 및 수학 사용 사례 분석
Pixeler 프로젝트 개발에서 EasyCanvas 그리기 라이브러리 사용에 대한 실제 요약
위 내용은 임대 매물에 대한 지도 검색 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
