好客租房166-根据定位获取当前城市

1实现步骤

打开百度文字标签demo

2创建label对象

3调用setStyle样式

4在map对象上调用addOverlay()方法 将文本覆盖物覆盖上

import React from 'react'

// 导入样式
// import './index.scss'
import styles from './index.module.scss'

import NavHeader from '../../components/NavHeader'

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 BMap.Size(30, -30)
		}
		const labelList = new window.BMapGL.Label('文本覆盖物', opts)

		// 设置样式
		labelList.setStyle({
			color: 'green',
		})

		// 添加覆盖物到地图中
		map.addOverlay(labelList)
	}
	render() {
		return (
			<div className={styles.map}>
				{/* 顶部导航栏组件 */}
				<NavHeader onLeftClick={() => {}}>地图找房</NavHeader>
				<div id="container" className={styles.container}></div>
			</div>
		)
	}
}

 运行结果