如何在google-maps-react中手动控制API调用时机及条件渲染？

google-maps-react默认会在组件渲染时自动加载Google Maps API，要实现用户同意后才加载API，核心思路是延迟渲染地图组件——因为该包的API加载逻辑和组件渲染绑定，不渲染组件就不会触发API请求。

具体实现步骤 #

• 维护用户同意状态：在组件中添加状态变量（比如userAgreed），初始值设为false，用户点击同意按钮后将其设为true。
• 条件渲染地图组件：仅当userAgreed为true时，才渲染被GoogleApiWrapper包裹的地图组件。

示例代码（函数组件） #

import { useState } from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

// 地图容器组件
const MapContainer = ({ google }) => {
  return (
    <div style={{ height: '400px', width: '100%' }}>
      <Map
        google={google}
        zoom={14}
        initialCenter={{ lat: 40.7128, lng: -74.0060 }}
      />
    </div>
  );
};

// 用GoogleApiWrapper包裹地图组件，传入API密钥
const WrappedMap = GoogleApiWrapper({
  apiKey: '你的Google Maps API密钥'
})(MapContainer);

// 主组件
const App = () => {
  const [userAgreed, setUserAgreed] = useState(false);

  const handleAgree = () => {
    setUserAgreed(true);
  };

  return (
    <div>
      {!userAgreed ? (
        <button onClick={handleAgree}>同意显示地图</button>
      ) : (
        <WrappedMap />
      )}
    </div>
  );
};

export default App;

补充说明 #

• 这种方式完全依赖google-maps-react的原有封装逻辑，不需要额外修改API加载逻辑，是最简洁的解决方案。
• 如果需要更灵活的API加载控制（比如提前加载但不显示地图），可以手动创建<script>标签插入DOM加载API，但这样需要自己处理API加载完成后的初始化逻辑，会绕开google-maps-react的封装，复杂度更高，一般不推荐。

内容的提问来源于stack exchange，提问作者Chinomso Johnson