React Google Maps API热力图无法渲染，页面变白求助

你的代码核心问题是同时混用了@react-google-maps/api组件库和原生Google Maps API创建地图实例，导致DOM渲染冲突，进而出现页面空白或热力图不显示的问题。以下是修正后的完整代码：

import React, { useState } from 'react';
import { GoogleMap, useJsApiLoader, HeatmapLayer } from '@react-google-maps/api';

const containerStyle = {
  width: '92vw',
  height: '92vh'
};

const center = {
  lat: 1.2966,
  lng: 103.7764,
};

// 热力图数据，直接使用lat/lng对象即可，无需转成google.maps.LatLng
const heatMapData = [
  { lat: 1.2966, lng: 103.7764 },
  { lat: 1.2950, lng: 103.7750 },
  { lat: 1.2950, lng: 103.7750 },
  { lat: 1.2950, lng: 103.7750 },
  { lat: 1.2950, lng: 103.7750 },
  { lat: 1.2950, lng: 103.7750 },
  { lat: 1.2950, lng: 103.7750 },
  { lat: 1.2950, lng: 103.7750 },
  { lat: 1.2950, lng: 103.7750 },
  { lat: 1.2950, lng: 103.7750 },
  { lat: 1.2950, lng: 103.7750 },
];

function Map() {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'API_KEY', // 替换成你的真实API密钥
    libraries: 'visualization',
  });

  const [map, setMap] = useState(null);

  // 通过onLoad获取组件库创建的地图实例
  const handleMapLoad = (mapInstance) => {
    setMap(mapInstance);
  };

  return isLoaded ? (
    <div style={{ paddingTop: '4vh' }}>
      <GoogleMap
        mapContainerStyle={{
          ...containerStyle,
          outline: 'none',
        }}
        center={center}
        zoom={16.1}
        options={{
          mapTypeId: 'satellite',
        }}
        onLoad={handleMapLoad}
      >
        {/* 直接使用组件库提供的HeatmapLayer组件 */}
        {map && (
          <HeatmapLayer
            data={heatMapData}
            map={map}
            options={{
              // 可自定义热力图参数，比如半径、透明度等
              radius: 20,
              opacity: 0.6
            }}
          />
        )}
      </GoogleMap>
    </div>
  ) : <div>加载中...</div>;
}

export default React.memo(Map);

关键修改说明： #

• 移除原生地图创建逻辑：完全依赖@react-google-maps/api的<GoogleMap>组件管理地图实例，避免DOM冲突
• 正确使用HeatmapLayer组件：组件库已经封装了原生热力图层，直接传入数据和地图实例即可，无需手动创建google.maps.visualization.HeatmapLayer
• 简化数据格式：热力图数据直接使用{lat: x, lng: y}格式，组件会自动转换为Google Maps所需的坐标对象
• 通过onLoad获取地图实例：只有当地图加载完成后，再渲染热力图，确保依赖的地图实例存在
• 替换空加载状态：原代码返回空标签，改为显示加载提示，提升用户体验

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