ホームページ > 記事 > ウェブフロントエンド > 賃貸物件の地図検索の導入
賃貸物件の地図検索の導入
- php中世界最好的语言オリジナル
- 2018-05-24 15:02:334581ブラウズ
今回は、レンタルでの地図検索機能の実装についてお届けします。地図検索機能を実装する際の注意点は何ですか?実際の事例を見てみましょう。
layout: post
title: 賃貸物件を探すための地図の書き方を教える 30 分 賃貸物件を探すための地図を書くには、まず Python3 環境が必要です。詳細は説明しません。準備方法が本当にわからない場合は、右に曲がって、Liao Xuefeng 先生のブログをご覧ください。
HTML 部分
- コードは、Amap API+Python でレンタルの問題を解決します。家、読み込みデータ部分を変更しただけです
<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;
- 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='賃貸物件の地図検索の導入賃貸物件の地図検索の導入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 と Math のユースケース分析
Pixeler プロジェクト開発における EasyCanvas 描画ライブラリの使用に関する実際的な概要
以上が賃貸物件の地図検索の導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。