好客租房项目day05react.pptx

React好客租房项目Day05

Contents目录地图找房模块-准备工作地图找房模块-功能实现地图找房模块-功能封装

Contents目录地图找房模块-准备工作地图找房模块-功能实现地图找房模块-功能封装

12：44获取到定位城市后，通过百度地图的地址解析器来获取对应的经纬度，然后设置进去要点提示根据定位展示当前城市掌握程度：应用1.1地图找房模块-准备工作视总

获取当前定位城市使用地址解析器解析当前城市坐标用centerAndZoom()方法在地图中展示当前城市，并设置缩放级别为11在地图中添加比例尺和平移缩放控件课堂问答视知识总结1.1.1根据定位展示当前城市总

06：28查看百度开发文档，通过Label标签来创建文本覆盖物要点提示创建文本覆盖物掌握程度：应用1.2地图找房模块-准备工作视总

创建Label示例对象掉用setStyle()方法设置样式在map对象上调用addOverLay()方法，讲文本覆盖物添加到地图中课堂问答视知识总结1.2.1创建文本覆盖物总

11：07默认文本覆盖物的样式与我们实际不符合，所以我们需要对文本覆盖物的样式来进行绘制通过Label的setContent方法，设置覆盖物的内容通过Label的setStyle方法，设置覆盖物的样式要点提示绘制房源覆盖物掌握程度：应用1.3地图找房模块-准备工作视总

由于默认提供的本文覆盖物与我们效果不符合，所以我们需要进行重新的绘制调用Label的setContent方法，传入html结构，修改HTML的内容样式;注意：调用了setContent那么里面文本的内容就失效了调用setStyle方法修改覆盖物样式给覆盖物添加点击事件对应的样式与结构在笔记中整理出来了课堂问答视知识总结1.3.1绘制房源覆盖物总

Contents目录地图找房模块-准备工作地图找房模块-功能实现地图找房模块-功能封装

05：51要点提示地图找房-功能分析掌握程度：理解2.1地图找房模块-功能实现视总

获取房源数据，渲染覆盖物点击覆盖物：-放大地图-获取数据，渲染下一级覆盖物区、镇覆盖物的点击事件中，清除现有的覆盖物，获取下一级数据，创建新的覆盖物小区：不清除覆盖物，移动地图，展示该小区下的房源信息课堂问答视知识总结2.1.1地图找房-功能分析总

19：52获取房源后，遍历房源数据，创建对应的Label覆盖物，然后添加到map中要点提示渲染所有区的覆盖物掌握程度：应用2.2地图找房模块-功能实现视总练

发送请求获取房源数据遍历数据，创建覆盖物，给每一个覆盖物添加唯一标识label.id=房源的value值给覆盖物添加点击事件addEventListener在单击事件中，获取到当前单击项的唯一标识放大地图（级别为13），调用clearOverlays()方法清除当前覆盖物课堂问答视知识总结2.2.1渲染所有区的覆盖物总练

练习动动手，自己实现一下区的房源信息吧！提示利用axios请求接口，获取房源数据遍历房源数据，在里面创建对应的Label对象Label对象创建的时候需要获取point（经纬度对象），所以我们需要在返回的数据里面获取到，通过newwindow.BMap.Point(longitude,latitude)设置覆盖物内容label.setContent()设置覆盖物样式label.setStyle()设置唯一标识label.id=唯一标识绑定点击事件addEventListener()，在点击事件里面，设置地图中心点，清除原来的覆盖物添加到map中map.addOverlay(label)7分钟练2.2.2渲染所有区的覆盖物视总

Contents目录地图找房模块-准备工作地图找房模块-功能实现地图找房模块-功能封装

08：01renderOverlays()方法作用createOverlays()方法作用createCircle()方法作用createReact()方法作用要点提示地图找房功能的封装流程掌握程度：应用3.1地图找房模块-功能封装视总

renderOverlays()作为入口-接收区域id参数，获取该区域下的房源数据-获覆盖物类型以及下级地图缩放级别createOverlays()方法-根据传入的类型，调用对应方法，创建覆盖物，到底是创建区镇的覆盖物还是小区覆盖物createCircle()方法-根据传入的数据创建覆盖物，绑定事件（放大地图，清除覆盖物，渲染下一级房源数据）createReact()方法-根据传入的数据创建