react好租客项目Day05-根据定位展示对应城市&地图找房模块封装&loading美化

地图找房模块

目标

• 完成根据定位展示当前城市
• 能够完成在地图上渲染出文本覆盖物
• 能够对文本覆盖物进行内容和样式修改
• 能够说出地图找房功能的业务逻辑
• 理解地图找房的封装流程，知道每一个方法的作用是什么？
• 能够参照老师代码敲出地图找房的封装代码
• 能够使用Toast的loading效果来对页面进行优化

根据定位展示当前城市（★★★）

• 获取当前定位城市
• 使用 地址解析器 解析当前城市坐标
• 调用 centerAndZoom() 方法在地图中展示当前城市，并设置缩放级别为11
• 在地图中添加比例尺和平移缩放控件

实现房源信息子地图中展示（★★★）

这些房源信息其实就是用文本覆盖物来实现的，所以我们先查看百度开发文档，先创建文本覆盖物

创建文本覆盖物

• 创建Label 示例对象
• 掉用setStyle() 方法设置样式
• 在map对象上调用 addOverlay() 方法，讲文本覆盖物添加到地图中

绘制房源覆盖物

• 由于默认提供的本文覆盖物与我们效果不符合，所以我们需要进行重新的绘制

• 调用Label的 setContent方法，传入html结构，修改HTML的内容样式;注意：调用了setContent 那么里面文本的内容就失效了

• 调用setStyle方法修改覆盖物样式

• 给覆盖物添加点击事件

• 覆盖的内容结构

<div class="${styles.bubble}">
  <p class="${styles.name}">${name}</p>
  <p>${num}套</p>
</div>

• 覆盖物的样式

const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255,0,0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rbg(255,255,255)',
    textAlign: 'center'
}

地图找房-业务逻辑分析（★★★）

• 获取房源数据，渲染覆盖物
• 点击覆盖物：
  • 放大地图
  • 获取数据，渲染下一级覆盖物
• 区、镇覆盖物的点击事件中，清除现有的覆盖物，获取下一级数据，创建新的覆盖物
• 小区：不清楚覆盖物，移动地图，展示该小区下的房源信息

获取所有区的信息

• 发送请求获取房源数据
• 遍历数据，创建覆盖物，给每一个覆盖物添加唯一标识
• 给覆盖物添加点击事件
• 在单击事件中，获取到当前单击项的唯一标识
• 放大地图（级别为13），调用clearOverlays()方法清除当前覆盖物

// 请求接口，获取房源数据
let res = await axios.get(`http://localhost:8080/area/map?id=${value}`)
// 遍历房源信息，创建对应的覆盖物
res.data.body.map(item => {
    // 给每一条数据添加覆盖物
    // 得到返回的经纬度信息
    let { coord: { longitude, latitude }, label: areaName, count, value } = item
    // 创建覆盖物
    let label = new window.BMap.Label('', {
        position: new window.BMap.Point(longitude, latitude),
        offset: new window.BMap.Size(-35, -35)
    })
    // 设置覆盖物内容
    label.setContent(`<div class="${styles.bubble}">
    <p class="${styles.name}">${areaName}</p>
    <p>${count}套</p>
  </div>`)
    // 设置样式
    label.setStyle(labelStyle)
    // 添加点击事件
    label.addEventListener('click', function () {
        // 当点击了覆盖物，要以当前点击的覆盖物为中心来放大地图
        map.centerAndZoom(this.K.position, 13);
        // 解决清除覆盖物的时候，百度地图js报错问题
        setTimeout(function () {
            map.clearOverlays()
        }, 0)
    })
    // 给label添加唯一标识
    label.id = value
    // 添加到地图上
    map.addOverlay(label)