Google Maps在React中加载后地图不显示怎么办？

这个问题我遇到过不少次，地图空白但控制台没报错的情况，一般是这几个原因导致的。

首先，最容易忽略的问题是API密钥的HTTP引用来源限制。你得去Google Cloud Console里，把你的域名加到HTTP引用来源（HTTP referrers）里。如果这里没配对，地图会加载失败但不会报错，页面看起来就是空白的。

然后检查一下你的容器样式。你写的是mapContainerStyle={{ width: '100%', height: '400px' }}，这个其实没问题，但我要你确认一下外层容器是不是也有高度。有的人外层div没设高度，里面设了也白搭。

还有一个常见坑是GoogleMap组件没有正确使用。@react-google-maps/api的使用方式是这样的，GoogleMap组件需要放在正确的位置，而且它自己会创建一个div容器：

import React from 'react';

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



const containerStyle = {

  width: '100%',

  height: '400px'

};



const center = {

  lat: -34.397,

  lng: 150.644

};



const MapComponent = () => {

  // 添加错误处理，看看有没有加载问题

  const { isLoaded, loadError } = useJsApiLoader({

    id: 'google-map-script',

    googleMapsApiKey: "YOUR_API_KEY",

    // 如果需要加载多个库，可以这样写

    // libraries: ['places'],

  });



  if (loadError) {

    return <div>地图加载失败: {loadError.message}</div>;

  }



  if (!isLoaded) {

    return <div>Loading...</div>;

  }



  return (

    <GoogleMap

      mapContainerStyle={containerStyle}

      zoom={10}

      center={center}

      // 这两个属性很重要，缺一不可

      options={{

        disableDefaultUI: false,

        zoomControl: true,

      }}

    >

      {/* 这里可以放Marker等子组件 */}

    </GoogleMap>

  );

};



export default MapComponent;

关键改动我给你标出来：

一是给useJsApiLoader加了loadError返回值，这个能帮你看到底是不是加载出错，只是没显示在控制台而已。

二是给GoogleMap加了options属性，有时候没有这个配置项地图也出不来。

如果还是不行，你试试在页面上直接用原生方式加载，排除一下是API本身的问题还是库的问题：

// 在componentDidMount或者useEffect里试试

useEffect(() => {

  if (window.google) {

    new window.google.maps.Map(document.getElementById('map'), {

      center: { lat: -34.397, lng: 150.644 },

      zoom: 10,

    });

  }

}, [isLoaded]);

你先按我说的改一下，把loadError打印出来看看具体什么情况。如果加载错误能显示出来，你告诉我错误信息，我再帮你分析。