google api 已经出现在 React 应用程序中

Question

“谷歌 API 已经呈现”

1.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY0&libraries=places"></script>
    <script>
        function init() {

            var options = {
              types: ['(cities)'],
              componentRestrictions: {country: "au"}
            };

            var input = document.getElementById('citySearch');
            var autocomplete = new google.maps.places.Autocomplete(input,options);
        }

        google.maps.event.addDomListener(window, 'load', init);
    </script>

2

  return (
    <div className="googleMapContainer">
      {console.log(window.google)}
      <LoadScript googleMapsApiKey={googleApiKey}>
        <div className="googleMap">
          <GoogleMap

怎么处理这个？一个 api 密钥位于 index.html 中，另一个尝试使用 api 密钥作为组件 react-google-maps 的 props

Answer 1

如果其他人发现这个谷歌提供了另一个 API 来加载脚本而不是使用<LoadScript>.

  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'YOUR API KEY HERE',
    libraries: ['geometry', 'drawing'],
  });

然后你可以isLoaded稍后使用：

{isLoaded && <GoogleMap
  onLoad={saveMap}
  mapContainerClassName={classes.mapContainer}
  mapContainerStyle={containerSize}
  center={DefaultCenterPoint}
  options={options}
>
  {mapItems}
</GoogleMap>}

如果地图 API 已经加载，这会自动处理:)

Answer 2

尝试在代码中<GoogleMap />不使用2。在此处查看更多信息<LoadScript />

或者，您可以将 LoadScript 移动到不渲染太多的父组件，最好靠近树的根部。