react中使用百度地图

第一步：

在react的项目下的public/index.html中引入

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

第二步：

在要展示的页面中引入：

import React, { useEffect } from 'react';
import { ArrowLeft } from '@react-vant/icons';
import './Map.css'

export default function Mapp() {

  useEffect(() => {
    const BMapGL = window.BMapGL
    const map = new BMapGL.Map("container");
    const point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true); //鼠标缩放
    var zoomCtrl = new BMapGL.ZoomControl();  // (地图右下角+ - 缩放按钮) 添加缩放控件
    map.addControl(zoomCtrl);
  }, [])
  return (
    <div className='Map-root'>
      <p className='Map-HomePage'><ArrowLeft /></p >
      <p className='Map-title'>地图找房</p >
      <div id="container" className='Map-container'>

      </div>
    </div>

  );
}

第三步：

引入css样式：

html,body,#root{
    width: 100%;
    height: 100%;
}
.Map-container {
    height: 500px;
}

.Map-root {
    height: 100%;
}

.Map-title {
    padding: 10px 0;
    text-align: center;
    background-color: rgb(226, 214, 201);
}

.Map-HomePage {
    position: absolute;
    top: 10px;
    margin-left: 5px;
}