Python 实现高德地图找房
一、 内容介绍
本课程使用 Python 脚本演示爬取某租房网站的房源信息，利用高德的 API 在地图上标出房源地点，划出距离工作地点1小时内可到达的范围。在项目实现的过程中熟悉了 Requests 、BeautifulSoup、CSV 等库的简单使用。
二、 实现原理及步骤
1.实验原理
实验中会用到三个文件：crawl.py、rent.csv与index.html，其中：
• crawl.py 是一个非常简单的爬取网页的脚本。
• rent.csv 由 crawl.py 生成，是房源文件。
• index.html 是最重要的显示地图的部分。
2.实验步骤
1) 开发准备
打开终端，默认进入 /home/project 目录，安装需要的库：
sudo pip3 install --upgrade pip
sudo pip3 install bs4
sudo pip3 install lxml
2) 实验分析
先分析一下我们需要爬取的页面：https://bj.58.com/pinpaigongyu/。选择好目标价位：2K-4K
按 F12 键或右键点击检查分析元素：
分析一下该网站的 url 构造形式，大致了解了它的路径规则：/pingpaigongyu/pn/{page}/minprice={min_rent}_{max_rent}。
3) 编写 Python 脚本
在 /home/project 目录下创建 crawl.py 文件，这里先直接给出全部代码。（见四、源代码）
4) 设计页面
在 /home/project 目录下新建 index.html 复制粘贴下面的设计页面代码：（见四、源代码）
需要注意的地方：key 这个参数，它需要你注册高德的开发者用户，创建应用才能得到，由于 JS API 不像它家的 Web API 一样有流量限制，所以这个 key 大可随意使用。
<script src="http://webapi.amap.com/maps?v=1.3&key=36aa77404a1c2f2fc922a569eaa49422&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"></script>
接下来我们简单的介绍一下如何注册高德地图的 key。
5) 注册高德地图 key 值
第一步：登录高德地图，点击右上角进行登录。
第二步：完善资料，包括开发者认证，邮箱认证，电话认证等，如实填写即可，由于认证比较简单，就不贴图了。
第三步：点击右上角控制台，创建应用，应用信息根据自己的实际填写即可。
第四步：创建完应用后点击右上角的“+”号就可以创建应用的Key，使用地图是根据开发文档把相应位置的key值换成自己的就好了。
第五步：只需要根据开发文档把相应的 JS 引入项目，把你的 key 填写就可以了。
<script src="http://webapi.amap.com/maps?v=1.3&key=你的key值&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"></script>
从名字就可以看出插件的作用：
• ArrivalRange：公交到达圈。
• Scale：标尺。
• Geocoder：正向地理编码（地址-坐标）。
• Transfer：路径规划。
• Autocomplete：地址自动补全。
输入 python3 -m http.server 8080 打开服务器，浏览器访问 http://localhost:8080 查看效果。
三、 实验总结
互联网时代，信息唾手可得，但是呢，我花大把时间看到的都不是我想要的，即使在看个人房源还是得自己排除一堆中介。我不是常常出门所以对交通不熟，把这些信息都查一遍又得花大量的时间。还好现在有了各种好的平台与开放接口，只需要你有一点点编程技能和一个想要实现什么东西的想法，一切就都不一样了。
四、 源代码
crawl.py
from bs4 import BeautifulSoup
import requests
import csv
import time
import lxml
url = "https://bj.58.com/pinpaigongyu/pn/{page}/?minprice=2000_4000"
#已完成的页数序号，初时为0
page = 0
csv_file = open("rent.csv","w")
csv_writer = csv.writer(csv_file, delimiter=',')
while True:
page += 1
print("fetch: ", url.format(page=page))
time.sleep(1)
response = requests.get(url.format(page=page))
html = BeautifulSoup(response.text,features="lxml")
house_list = html.select(".list > li")
# 循环在读不到新的房源时结束
if not house_list:
break
for house in house_list:
house_title = house.select("h2")[0].string
house_url = house.select("a")[0]["href"]
house_info_list = house_title.split()
# 如果第二列是公寓名则取第一列作为地址
if "公寓" in house_info_list[1] or "青年社区" in house_info_list[1]:
house_location = house_info_list[0]
else:
house_location = house_info_list[1]
house_money = house.select(".money")[0].select("b")[0].string
csv_writer.writerow([house_title, house_location, house_money, house_url])
csv_file.close()
index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<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=36aa77404a1c2f2fc922a569eaa49422&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>
<div id="container"></div>
<div class="control-panel">
<div class="control-entry">
<label>选择工作地点：</label>
<div class="control-input">
<input id="work-location" type="text">
</div>
</div>
<div class="control-entry">
<label>选择通勤方式：</label>
<div 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)" /> 地铁
</div>
</div>
<div class="control-entry">
<label>导入房源文件：</label>
<div class="control-input">
<input type="file" name="file" onChange="importRentInfo(this)" />
</div>
</div>
</div>
<div id="transfer-panel"></div>
<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 importRentInfo(fileInfo) {
var file = fileInfo.files[0].name;
loadRentLocationByFile(file);
}
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) {
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 = "<div>房源：<a target = '_blank' href='https://bj.58.com/pinpaigongyu/?key=" + address + "'>" + address + "</a><div>"
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 loadRentLocationByFile(fileName) {
delRentLocation();
var rent_locations = new Set();
$.get(fileName, function(data) {
data = data.split("\n");
data.forEach(function(item, index) {
rent_locations.add(item.split(",")[1]);
});
rent_locations.forEach(function(element, index) {
addMarkerByAddress(element);
});
});
}
</script>
</body>
</html>
2316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
