高德地图找房
一、项目背景
1.高德开放平台
高德开放平台是国内技术领先的LBS服务提供商,拥有先进的数据融合技术和海量的数据处理能力。
服务超过三十万款移动应用,日均处理定位请求及路径规划数百亿次。
高德开放平台向广大开发者提供覆盖移动端和Web端的开发工具,开发者通过调用开发包或接口即可在应用或网页中实现地图显示、标注、位置检索等功能。使得LBS应用的开发过程更加容易。
高德开放平台为开发者提供了三项主要的能力:
-
1.专业、易用的地图开发工具:API/SDK
-
2.快捷的位置云计算:云图
-
3.权威的位置大数据:高德位智
2.HTML
HTML的全称为超文本标记语言,是一种标记语言。
它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
3.JavaScript
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。
虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。
因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。
但实际上它的语法风格与Self及Scheme较为接近。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的第一个 JavaScript 页面</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
点击这里来显示日期和时间
</button>
<p id="demo"></p>
</body>
</html>
二、项目目标
1.主要目标
从房源网站获取房源信息,使用高德地图Web端(JS API) 以工作单位为中心,显示一小时通勤范围房源,并能够进行工作地点路径规划。
2.目标分解
-
爬取房源信息
-
清洗房源数据
-
本地存储数据
-
编写页面代码
三、技术选型
1.问题:房源平台如何选择?
-
避免选取反爬虫机制过强的网站
-
尽量选取房源名称和地址在列表上明显标出的网站,以避免嵌套爬取,造成大量资源开销
-
尽量选取静态数据展示网页,避免动态接口变化或鉴权受阻
2.问题:文件存储格式什么样?
-
CSV格式,读写效率高,有模块可以辅助写入
-
包含房源标题和房源地址,为了统一起见,分别位于[0], [1]列
-
可拓展如房源链接等内容,作为地图信息点的拓展
3.问题:如何申请高德地图API?
-
在高德开放平台 | 高德地图API上申请成为个人开发者,转到控制台
-
在“我的应用”-> “应用管理”-> “创建新应用”处,填写信息,创建新应用
-
在应用列表点击“添加”
-
填写Key名称,服务平台选择 Web端(JS API),同意并提交
-
获得Key与安全密钥,此密钥将用于后续前端接口申请
注意:API Key虽然在项目练习中可以共享,但实际生产环境中请勿共享自己的Key以及安全密钥
四、课堂要求
1.提交项目结构
index.html 地图网页文件
README.md 项目描述说明文档
requirements.txt 项目依赖包版本号(项目需要下载到本地执行,如果有第三方依赖包,必须填写)
2.标注核心算法函数位置
# 爬虫程序 位于scrap.py文件 第31行
def main():
"""爬虫程序"""
pass
# 地图程序 位于index.py文件 第96行
<script>
/* ---------------------------
生成AMap.Map对象,类型"container", 对象名 map
地图初始化城市和地图的一些属性
*/
var map = new AMap.Map("container", {
resizeEnable: true,
zoomEnable: true,
center: [116.397, 39.91],
zoom: 11
});
...
</script>
3.程序运行效果截图
界面样例如图所示:
具体房源信息展示: