好客租房167-绘制房源覆盖物

import React from 'react'
// 导入样式
// import './index.scss'
import styles from './index.module.scss'
import NavHeader from '../../components/NavHeader'
// 覆盖物样式
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 myGeo = new window.BMapGL.Geocoder()
    myGeo.getPoint(
      label,
      (point) => {
        if (point) {
          map.centerAndZoom(point, 11)
          // map.addOverlay(new window.BMapGL.Market(point))
          map.addControl(new window.BMapGL.NavigationControl())
          map.addControl(new window.BMapGL.ScaleControl())
        }
      },
      label
    )
    var map = new window.BMapGL.Map('container') // 创建地图实例
    var point = new window.BMapGL.Point(116.404, 39.915) // 创建点坐标
    map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
    /* 
            1 创建 Label 实例对象。
            2 调用 setStyle() 方法设置样式。
            3 在 map 对象上调用 addOverlay() 方法，将文本覆盖物添加到地图中。
          */
    const opts = {
      position: point,
      offset: new window.BMapGL.Size(30, -30)
    }
    const labelList = new window.BMapGL.Label('', opts)
         // 设置房源覆盖物内容
         labelList.setContent(`
         <div class="${styles.bubble}">
           <p class="${styles.name}">浦东</p>
           <p>99套</p>
         </div>
       `)
    // 设置样式
    labelList.setStyle({
      color: 'green',
    })
         // 添加单击事件
         labelList.addEventListener('click', () => {
            console.log('房源覆盖物被点击了')
          })
    // 添加覆盖物到地图中
    map.addOverlay(labelList)
  }
  render() {
    return (
      <div className={styles.map}>
        {/* 顶部导航栏组件 */}
        <NavHeader onLeftClick={() => {}}>地图找房</NavHeader>
        <div id="container" className={styles.container}></div>
      </div>
    )
  }
}