地址已切换到广州
import React from 'react'
import './map.less'
import './map.css'
import Navs from '../../components/NavHeaders/Navh';
import { Map, Marker, NavigationControl, InfoWindow, ZoomControl, ScaleControl, CustomOverlay, AutoComplete } from 'react-bmapgl';
function DOM () {
return <div className="custom" >
<span className='p'>浦东</span>
</div>
}
const BMapGL = window.BMapGL
class Maps extends React.Component {
componentDidMount () {
const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))
// 创建地址解析器
const myGeo = new BMapGL.Geocoder();
// 将解析结果显示在地图上
myGeo.getPoint(label, (point) => {
if (point) {
// 调整视野
Map.centerAndZoom(point, 11);
//Map.addOverlay(new BMapGL.Marker(point, { title: '北京市海淀区上地10街' }))
} else {
alert('您选择的地址没有解析到结果!');
}
}, label)
}
render () {
return (
<div className='map'>
<Navs>地图找房</Navs>
{/* 地图START */}
<Map center={{ lng: 116.402544, lat: 39.928216 }} zoom="11" style={{ height: 700 }}>
{/* 点标注 */}
<Marker position={{ lng: 116.402544, lat: }} />
{/* 3D控件 */}
<NavigationControl />
{/* 缩放控件 */}
<ZoomControl></ZoomControl>
{/* 比例尺控件 */}
<ScaleControl />
{/* 自定义覆盖物START */}
<CustomOverlay position={{ lng: 116.402544, lat: 39.928216 }}>
<DOM />
</CustomOverlay>
{/* 自定义覆盖物END */}
{/* 信息窗口 */}
<InfoWindow position={{ lng: 116.402544, lat: 39.928216 }} text="我不行了" title="你好" height={80} />
</Map>
{/* 地图END */}
</div>
)
}
}
export default Maps
但显示还是北京市(React-BMapGL文档中没有介绍,用百度地图API文档的逆地址解析器又没用)