导入错误：'google-map-react'未导出'GoogleApiWrapper'该如何解决

Attempted import error: 'GoogleApiWrapper' is not exported from 'google-map-react'
出现该报错的核心原因有两个：

• 你安装的是google-map-react包，但该包从未提供GoogleApiWrapper导出，该API属于另一个名称相似的包google-maps-react，属于常见的包名混淆问题
• 如果你确认安装的是google-maps-react包，2.0.0及以上版本已正式移除GoogleApiWrapper高阶组件，旧语法导入会触发报错

你可以根据你的项目需求选择以下任意一种方案：

方案1：继续使用google-map-react（推荐，包体更轻、维护更活跃） #

google-map-react无需高阶组件封装，直接传入API密钥即可调用，示例代码如下：

1. 安装依赖

npm install google-map-react

2. 组件使用示例

import React from 'react';
import GoogleMapReact from 'google-map-react';

const CustomMap = () => {
  const mapConfig = {
    center: { lat: 39.9042, lng: 116.4074 },
    zoom: 12
  };

  return (
    <div style={{ height: '500px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: '你的谷歌地图API密钥' }}
        defaultCenter={mapConfig.center}
        defaultZoom={mapConfig.zoom}
      >
        {/* 此处可插入自定义标记、覆盖物等子组件 */}
      </GoogleMapReact>
    </div>
  );
};

export default CustomMap;

方案2：切换到google-maps-react包使用GoogleApiWrapper #

如果你是按照旧版教程开发，必须使用GoogleApiWrapper语法，可以切换包：

1. 卸载错误安装的包，安装目标包

npm uninstall google-map-react
npm install google-maps-react

2. 修改导入语句即可正常使用

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

方案3：降级google-maps-react到兼容版本 #

如果你已经安装了google-maps-react高版本，不想修改现有代码，可以降级到1.x版本：

npm install google-maps-react@1.1.38

内容的提问来源于stack exchange，提问作者Junaid Karim