好客租房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>
		)
	}
}

运行结果