高德地图找房

一、项目背景

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.程序运行效果截图

界面样例如图所示：

具体房源信息展示：