租房项目五

地图找房模块

1、功能分析

• 业务：
  • 使用百度地图 API 实现地图找房
• 功能：
  • 展示当前定位城市
  • 展示该城市所有区的房源数据
  • 展示某区下所有镇的房源数据
  • 展示某镇下所有小区的房源数据
  • 展示某小区下的房源数据列表
• 难点： 百度地图标注、缩放级别、缩放事件等的使用

 

2、顶部导航栏

• 1. 封装 NavHeader 组件实现城市选择、地图找房页面的复用
• 2. 在 components 目录中创建组件 NavHeader/index.js
• 3. 在该组件中封装 antd-mobile 组件库中的 NavBar 组件
• 4. 在地图找房页面使用封装好的 NavHeader 组件实现顶部导航栏功能
• 5. 使用 NavHeader 组件，替换城市选择页面的 NavBar 组件

import React from 'react'

// 导入封装好的 NavHeader 组件
import NavHeader from '../../components/NavHeader'

// 导入样式
import './index.scss'

export default class Map extends React.Component {
    componentDidMount() {
        // 初始化地图实例
        // 注意：在 react 脚手架中全局对象需要使用 window 来访问，否则，会造成 ESLint 校验错误
        const