好客租房171-地图找房renderOverlays

renderOverlays

1接受改id参数 根据该id参数获取房源

2调用getTypeAndZoom方法获取地图缩放级别 覆盖物类别

import React from 'react'// 导入axios
import axios from 'axios'// 导入封装好的 NavHeader 组件
import NavHeader from '../../components/NavHeader'// 导入样式
// import './index.scss'
import styles from './index.module.css'// 解决脚手架中全局变量访问的问题
const BMapGL = window.BMapGL// 覆盖物样式
const labelStyle = {cursor: 'pointer',border: '0px solid rgb(255, 0, 0)',padding: '0px',whiteSpace: 'nowrap',fontSize: '12px',color: 'rgb(255, 255, 255)',textAlign: 'center'
}export default class Map extends React.Component {componentDidMount() {this.initMap()}// 初始化地图initMap() {// 获取当前定位城市const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))// console.log(label, value)// 初始化地图实例const map = new BMapGL.Map('container')//能够在其他方法中获取到地图对象this.map=map// 创建地址解析器实例const myGeo = new BMapGL.Geocoder()// 将地址解析结果显示在地图上，并调整地图视野myGeo.getPoint(label,async point => {if (point) {//  初始化地图map.centerAndZoom(point, 11)// 添加常用控件map.addControl(new BMapGL.NavigationControl())map.addControl(new BMapGL.ScaleControl())/* 1 获取房源数据。2 遍历数据，创建覆盖物，给每个覆盖物添加唯一标识（后面要用）。3 给覆盖物添加单击事件。4 在单击事件中，获取到当前单击项的唯一标识。5 放大地图（级别为13），调用 clearOverlays() 方法清除当前覆盖物。*/const res = await axios.get(`http://localhost:8080/area/map?id=${value}`)console.log('房源数据：', res)res.data.body.forEach(item => {// 为每一条数据创建覆盖物const {coord: { longitude, latitude },label: areaName,count,value} = item// 创建覆盖物const areaPoint = new BMapGL.Point(longitude, latitude)const label = new BMapGL.Label('', {position: areaPoint,offset: new BMapGL.Size(-35, -35)})// 给 label 对象添加一个唯一标识label.id = value// 设置房源覆盖物内容label.setContent(`<div class="${styles.bubble}"><p class="${styles.name}">${areaName}</p><p>${count}套</p></div>`)// 设置样式label.setStyle(labelStyle)// 添加单击事件label.addEventListener('click', () => {console.log('房源覆盖物被点击了', label.id)// 放大地图，以当前点击的覆盖物为中心放大地图// 第一个参数：坐标对象// 第二个参数：放大级别map.centerAndZoom(areaPoint, 13)// 解决清除覆盖物时，百度地图API的JS文件自身报错的问题setTimeout(() => {// 清除当前覆盖物信息map.clearOverlays()}, 0)})// 添加覆盖物到地图中map.addOverlay(label)})}},label)}async renderOverlay(id){const res = await axios.get(`http://localhost:8080/area/map?id=${id}`)// console.log('renderOverlays 获取到的数据：', res)const data = res.data.body// 调用 getTypeAndZoom 方法获取级别和类型const { nextZoom, type } = this.getTypeAndZoom()data.forEach(item => {// 创建覆盖物this.createOverlays(item, nextZoom, type)})}getTypeAndZoom(){//调用地图的getZoom方法 来获取缩放级别const zoom=this.map.getZoom()console.log(zoom,"获取级别和类型")let nextZoom,typeif(zoom>=10&&zoom<12){nextZoom=13type='circle'}else if(zoom>=12&&zoom<14){nextZoom=15type='circle'}else if(zoom>=14&&zoom<16){type='rect'}return{nextZoom,type}}render() {return (<div className={styles.map}>{/* 顶部导航栏组件 */}<NavHeader>地图找房</NavHeader>{/* 地图容器元素 */}<div id="container" className={styles.container} /></div>)}
}