react使用百度地图

第一步：在react搭建项目中的pubilc/index.html引入

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=sv0fiMd09PCDRYtDS8Zo59YiSKSvCtov"></script>

第二步：进入百度地图官网React-BMapGL文档

第三步：

import { Map } from 'react-bmapgl'
import React, { PureComponent } from 'react'
import { CustomOverlay } from 'react-bmapgl'
import { Tag, NavBar, SearchBar } from 'antd-mobile'
import './index.css'
import { Popup } from 'react-vant'
import request from '../../service/request'
export default class Maps extends PureComponent {
  state = {
    city: sessionStorage.getItem('city'),
    childCity: [],
    zoom: 10,
    poup: '',
    poupstate: false,
    pouplist: []
  }
  componentDidMount = () => {
    this.getCity()
    console.log(this.state.childCity);
  }
  getCity = async () => {
    let { body } = await request.get('/area/map?id=' + sessionStorage.getItem('cityid'))
    console.log(body,'map00000000');
    this.setState({
      childCity: body
    })
  }
  firstLevel = async (i) => {
    console.log(i,'firstLevel');
    sessionStorage.setItem('cityid', i.value)
    let { body } = await request.get('/area/map?id=' + i.value)
    this.setState({
      childCity: body,
      city: new window.BMapGL.Point(i.coord.longitude, i.coord.latitude),
      zoom: this.state.zoom + 2
    })
  }
  endLevel = async (i) => {
    let { body } = await request.get('/houses?cityId=' + i.value)
    console.log(body.list);
    this.setState({
      poup: 'bottom',
      poupstate: true,
      pouplist: body.list
    })
  }
  back = () => {
    window.location.href = '/home/index'
  }
  DOM = () => {
    if (this.state.zoom < 13) {
      return this.state.childCity.map(i => {
        return <CustomOverlay position={new window.BMapGL.Point(i.coord.longitude, i.coord.latitude)}>
          <div className="custom" style={{ width: 80, height: 80, background: 'rgba(12,181,106,.9)', borderRadius: '50%', textAlign: 'center' }} onClick={() => this.firstLevel(i)}>
            <span style={{ color: '#fff' }}>{i.label}</span>
            <p>{i.count}</p>
          </div>
        </CustomOverlay>
      })
    }
    else {
      return this.state.childCity.map(i => {
        return <CustomOverlay position={new window.BMapGL.Point(i.coord.longitude, i.coord.latitude)}>
          <div className="customs" style={{ width: 60, height: 20, background: 'rgba(12,181,106,.9)', borderRadius: '5px', textAlign: 'center' }} onClick={() => this.endLevel(i)}>
            <span style={{ color: '#fff' }}>{i.label}</span>
            <p>{i.count}</p>
          </div>
        </CustomOverlay>
      })
    }
  }
  onClose = () => {
    this.setState({
      poup: ''
    })
  }
  check = (id) => {
    window.location.href = '/detail/' + id
  }
  render() {
    let { city, zoom } = this.state
    return (
      <div className='map'>
        <NavBar onBack={this.back}>
          找图找房
        </NavBar>
        <Map
          center={city}
          zoom={zoom}
          tilt={40}
          style={{ height: '855px' }}
        >
          {this.DOM()}
        </Map>
        <Popup
          visible={this.state.poupstate}
          style={{ height: '30%' }}
          position='bottom'
          onClose={this.onClose}
        >
          {this.state.pouplist.map(i => {
            return <li key={i.houseCode} onClick={() => this.check(i.houseCode)}>
              <div className='map1'>
                <img src={i.houseImg} alt="" />
                <div className='map11'>
                  <h3>{i.title}</h3>
                  <p>{i.desc}</p>
                  <Tag>{i.tags}</Tag>
                  <br />
                  <label>{i.price}</label><a>元/月</a>
                </div>

              </div>
              <span></span>
            </li>
          })}
        </Popup>
      </div>
    )
  }
}