Reactjs 如何使用fitbounds（）将所有标记居中并显示在react中

我是react的初学者，我尝试使用circle（）和fitbounds（）将我所有的标记显示在屏幕上。现在只有第一个标记显示在屏幕上，但当我缩小时，我可以看到其余的标记。但是，我希望在运行应用程序时显示所有标记。帮助将是伟大的！ 我尝试使用/global google/，然后声明一个存储google.maps.latLngBounds（）的常量边界，但它给了我一个引用错误，说没有定义google。我创建了一个const，该const占用了谷歌的窗口，但错误仍然存在。因为我对react了解不多，所以我不确定我会错在哪里

此外，代码片段需要url中的API_键才能在我删除API键时运行

/*global google*/
//Declaring the imports

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react- 
google-maps";`enter code here`
import { Circle } from "react-google-maps";

//The bounds give me a google not defined error 
//const google = window.google;
//const bounds = new google.maps.LatLngBounds();



const MyMapComponent = withScriptjs(withGoogleMap((props) =>

//Creating the GoogleMap instance tag that takes a default zoom and uses only one center
<GoogleMap
    defaultZoom={13}
    center={{ lat: 35.8592, lng: -78.5921 }}
>
    {}
    {props.isMarkerShown &&
        props.markers.map((marker, index) => {

               //MarkerOptions
                return (
                    <Marker
                        position={marker}
                        title="Click to zoom"
                        label={"" + ((index + 1))}
                        onClick={props.onMarkerClick}
                    />
                )
        })
    }
</GoogleMap>
))


const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
    <li>{number}</li>
)

//The three markers being placed
const storeLocations = [
 { "lat": 35.8592, "lng": -78.5921 },
 { "lat": 35.8964, "lng": -78.5734 },
 { "lat": 35.8794, "lng": -78.5693 }
]

export default class MapComponent extends Component {

state = {
    isMarkerShown: false,
    selectedMarkerNumber: 0
}

componentDidMount() {
    this.setState({ isMarkerShown: true })
}

delayedShowMarker = () => {
    setTimeout(() => {
        this.setState({ isMarkerShown: true })
    }, 3000)
}

animatePin() {

    const min = 1;
    const max = 4;
    const rand = min + Math.floor(Math.random() * (max - min));
    console.log("rand" + rand)

    this.setState({
        selectedMarkerNumber: rand
    })
}

//Render function
render() {
    return (
        <div>
            <MyMapComponent
                isMarkerShown={this.state.isMarkerShown}
                googleMapURL="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&v=3.exp&libraries=geometry,drawing,places"
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `250px` }} />}
                mapElement={<div style={{ height: `100%` }} />}
                onMarkerClick={this.handleMarkerClick}
                markers={storeLocations}
            />
            <div className="item" color="green" onClick={() => this.animatePin()}>
                <ul>{listItems}</ul>
            </div>
        </div>
        )

    }

}

/*全球谷歌*/
//申报进口
从“React”导入React，{Component}；
导入{withScriptjs，withGoogleMap，GoogleMap，Marker}来自“react-
谷歌地图”`在这里输入代码`
从“react google maps”导入{Circle}；
//边界给了我一个google未定义的错误
//const google=window.google；
//const bounds=new google.maps.LatLngBounds（）；
const MyMapComponent=withScriptjs（withGoogleMap（（道具）=>
//创建采用默认缩放并仅使用一个中心的GoogleMap实例标记
{}
{props.ismarkersown&&
道具.标记.地图（（标记，索引）=>{
//标记选项
返回(
)
})
}
))
常量数=[1,2,3,4,5]；
const listItems=numbers.map（（number）=>
{number}
)
//正在放置的三个标记
常数存储位置=[
{“lat”：35.8592，“液化天然气”：-78.5921}，
{“lat”：35.8964，“液化天然气”：-78.5734}，
{“lat”：35.8794，“液化天然气”：-78.5693}
]
导出默认类MapComponent扩展组件{
状态={
伊斯马克镇：错，
selectedMarkerNumber:0
}
componentDidMount（）{
this.setState（{ismarkersown:true}）
}
delayedShowMarker=（）=>{
设置超时（（）=>{
this.setState（{ismarkersown:true}）
}, 3000)
}
animatePin（）{
常数min=1；
常数max=4；
const rand=min+Math.floor（Math.random（）*（max-min））；
console.log（“兰德”+兰德）
这是我的国家({
selectedMarkerNumber:rand
})
}
//渲染功能
render（）{
返回(
this.animatePin（）}>
{listItems}
)
}
}