Reactjs 如何在react中添加多个谷歌街景？

我在一个组件中添加了三个街景，使用React.js的

googlestreetview组件调用
React streetview
，得到错误：


以下是组件的代码：

import React from 'react'
import ReactStreetview from 'react-streetview'
import { streetViewPanoramaOptions } from './constants.js'

const About = () => {
  const googleMapsApiKey = 'myAPIkey'    
  return (
    <div>
      <div
        style={{ .... }}
      >
        <ReactStreetview
          apiKey={googleMapsApiKey}
          streetViewPanoramaOptions={streetViewPanoramaOptions.hall}
        />
      </div>
      <div
        style={{ .... }}
      >
        <ReactStreetview
          apiKey={googleMapsApiKey}
          streetViewPanoramaOptions={streetViewPanoramaOptions.firstRoom}
        />
      </div>
      <div
        style={{ .... }}
      >
        <ReactStreetview
          apiKey={googleMapsApiKey}
          streetViewPanoramaOptions={streetViewPanoramaOptions.secondRoom}
        />
      </div>
    </div>
  )
}
export default About

从“React”导入React
从“react streetview”导入react streetview
从“./constants.js”导入{StreetViewPanoramOptions}
const About=（）=>{
const googleMapsApiKey='myAPIkey'
返回(
)
}
导出默认值关于
可能是因为您正在使用多个
ReactStreetview
s。似乎每次使用该组件时，都会加载Google Maps API。我理解这一点，并且很高兴知道如何解决我的问题？似乎您希望编写自己的自定义ReactStreetview组件，该组件不使用自己版本的地图，而是依赖连接到多个视图实例的单个API。