如何在React项目中以非CDN方式集成Google Map？加载异常求解

先修正代码中的明显语法错误 #

你提供的代码里存在语法错误：zoom={19}type here 这一行无效，会导致组件渲染异常，直接删除或者替换为合法属性（比如mapTypeId={maps.MapTypeId.ROADMAP}）。

非CDN方式（npm包）的正确配置步骤 #

你应该使用的是@react-google-maps/api这个npm包，正确集成需要用LoadScript组件包裹地图，确保API密钥正确加载：

1. 安装依赖：

npm install @react-google-maps/api
# 或者用yarn
yarn add @react-google-maps/api

2. 修正后的完整组件示例（类组件）：

import { LoadScript, GoogleMap, Marker } from '@react-google-maps/api';

class MapComponent extends React.Component {
  renderMarkers = (map, maps) => {
    // 在这里编写自定义标记逻辑
  };

  render() {
    // 必须给地图容器设置明确高度，否则会因为高度为0"消失"
    const containerStyle = {
      width: '100%',
      height: '400px'
    };
    // 替换为你的目标坐标
    const center = { lat: 39.9042, lng: 116.4074 };

    return (
      // 用LoadScript包裹，传入你的API密钥
      <LoadScript googleMapsApiKey="你的Google Maps API密钥">
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={19}
          onLoad={(map) => console.log('地图加载完成')}
          onUnmount={() => console.log('地图卸载')}
          onGoogleApiLoaded={({ map, maps }) => this.renderMarkers(map, maps)}
        >
          <Marker position={center} title="Here" />
        </GoogleMap>
      </LoadScript>
    );
  }
}

export default MapComponent;

地图短暂显示后消失的常见原因排查 #

1. 容器高度未设置：这是最常见的原因，如果containerStyle没有设置高度，地图渲染后会因为容器高度为0而不可见，必须给容器设置明确的像素高度或百分比高度（父元素也要有对应高度）。
2. API密钥配置问题：
   • 确认你的API密钥已经启用了Maps JavaScript API（在Google Cloud控制台中检查API启用状态）。
   • 检查密钥是否设置了IP限制或referer限制，导致请求被拒绝（查看浏览器控制台的网络请求，看maps.googleapis.com的请求是否有403错误）。
3. onUnmount函数异常：如果你的onUnmount函数中手动销毁了地图实例，会导致地图提前消失，组件内部已经处理了卸载逻辑，无需自定义销毁操作。
4. 控制台报错：打开浏览器开发者工具的控制台，查看是否有语法错误、API权限错误，这些都会导致地图渲染失败。

内容的提问来源于stack exchange，提问作者Kiddo Dev