本地环境下@react-google-maps/api地图与Marker不显示，页面空白

以下是代码中存在的问题及修复方案：

问题分析 #

• 闭包依赖缺失：onLoad回调函数依赖props.lat和props.lng，但未加入依赖数组，导致React无法感知props变化，影响地图初始化逻辑。
• 回调函数混淆：给Marker绑定了Map的onLoad函数，干扰Marker的正常渲染逻辑。
• 边界判断缺失：未判断props.lat/props.lng是否存在，直接执行fitBounds可能导致初始化失败。
• 加载状态无提示：地图未加载完成时返回空片段，导致页面完全空白。

修正后的代码 #

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

const containerStyle = {
  width: '95%',
  height: '550px'
};

const defaultCenter = {
  lat: 27.8103,
  lng: 70.4125
};
   
function Map(props) {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "你的有效API密钥" // 替换为实际可用的API密钥
  })

  const [map, setMap] = React.useState(null)

  const onMapLoad = React.useCallback(function callback(mapInstance) {
    // 仅当props传入有效坐标时执行边界适配
    if (props.lat && props.lng) {
      const bounds = new window.google.maps.LatLngBounds({
        lat: props.lat,
        lng: props.lng
      });
      mapInstance.fitBounds(bounds);
    }
    setMap(mapInstance)
  }, [props.lat, props.lng]) // 补充依赖数组

  const onMapUnmount = React.useCallback(function callback(mapInstance) {
    setMap(null)
  }, [])

  // 加载中显示提示，避免页面空白
  if (!isLoaded) {
    return <div>地图加载中...</div>
  }

  // 优先使用props传入的坐标，无则使用默认值
  const targetCenter = props.lat && props.lng ? { lat: props.lat, lng: props.lng } : defaultCenter

  return (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={targetCenter}
      zoom={20}
      onLoad={onMapLoad}
      onUnmount={onMapUnmount}
    >
      <Marker position={targetCenter} />
    </GoogleMap>
  )
}

export default Map

额外注意事项 #

• 确保API密钥有效，且已在Google Cloud控制台启用Maps JavaScript API。
• 检查Google Cloud账号是否启用计费（免费额度内也需开通计费功能，否则地图无法加载）。
• 确认地图容器的父元素没有设置display: none或其他导致容器不可见的样式。

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