在React组件中自主使用Google Map API的操作及初始化方法咨询

嘿，我完全懂你不想依赖第三方库、想自己动手实现Google Maps集成的想法——这真的能让你对API本身理解得更透彻！既然你已经搞定了脚本加载，剩下的步骤其实没那么复杂，我给你一步步捋清楚：

首先，你需要在React组件的渲染输出里，加一个带有唯一id的div作为地图的容器。一定要给这个容器设置明确的宽高，不然Google Maps会因为没有尺寸而无法显示：

// 函数组件或类组件的render部分都可以这么写
<div id="map" style={{ width: '100%', height: '400px' }}></div>

因为React有自己的生命周期，我们需要等到DOM渲染完成后，才能获取到这个容器元素并初始化地图。这里分函数组件和类组件两种情况给你示例：

函数组件（用useEffect和useRef） #

用useEffect确保只在组件挂载时执行一次初始化，用useRef保存地图实例，方便后续操作：

import { useEffect, useRef } from 'react';

function CustomGoogleMap() {
  // 用ref存储地图实例，避免重复初始化
  const mapInstance = useRef(null);

  useEffect(() => {
    // 先检查Google Maps API是否已经加载完成
    if (!window.google) {
      console.error('Google Maps API 还没加载好，请检查脚本链接！');
      return;
    }

    // 获取地图容器DOM元素
    const mapContainer = document.getElementById('map');
    if (!mapContainer) return;

    // 初始化地图，就是你提到的那个基础配置
    const map = new window.google.maps.Map(mapContainer, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8, // 可以根据需求调整缩放级别
    });

    // 把地图实例存在ref里，方便后续操作
    mapInstance.current = map;

    // 组件卸载时清理地图，避免内存泄漏
    return () => {
      if (mapInstance.current) {
        // Google Maps没有官方的destroy方法，清空容器即可
        mapContainer.innerHTML = '';
        mapInstance.current = null;
      }
    };
  }, []); // 空依赖数组，确保只在组件挂载时执行一次

  return <div id="map" style={{ width: '100%', height: '400px' }}></div>;
}

export default CustomGoogleMap;

类组件（用生命周期钩子） #

如果是类组件，就用componentDidMount来初始化，componentWillUnmount来清理：

import React, { Component } from 'react';

class CustomGoogleMap extends Component {
  mapInstance = null;

  componentDidMount() {
    if (!window.google) {
      console.error('Google Maps API 加载失败，请检查脚本！');
      return;
    }

    const mapContainer = document.getElementById('map');
    if (!mapContainer) return;

    this.mapInstance = new window.google.maps.Map(mapContainer, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  }

  componentWillUnmount() {
    if (this.mapInstance) {
      document.getElementById('map').innerHTML = '';
      this.mapInstance = null;
    }
  }

  render() {
    return <div id="map" style={{ width: '100%', height: '400px' }}></div>;
  }
}

export default CustomGoogleMap;

有了地图实例后，你就可以调用Google Maps的各种API了。比如添加一个标记：

// 在函数组件的useEffect里，初始化地图之后添加
const marker = new window.google.maps.Marker({
  position: { lat: -34.397, lng: 150.644 },
  map: map, // 这里的map就是刚才初始化的地图实例
  title: '我的第一个标记！',
});

如果要在用户交互时操作（比如点击按钮添加标记），就用之前存在ref里的实例：

// 函数组件里加一个点击事件
const addNewMarker = () => {
  if (!mapInstance.current) return;
  
  new window.google.maps.Marker({
    position: { lat: -34.4, lng: 150.65 },
    map: mapInstance.current,
    title: '新标记',
  });
};

// 在render里添加按钮
return (
  <div>
    <button onClick={addNewMarker}>添加标记</button>
    <div id="map" style={{ width: '100%', height: '400px' }}></div>
  </div>
);

• 确保API脚本加载完成：如果脚本加载有延迟，可能会出现window.google不存在的情况，你可以给脚本标签加onload事件，触发初始化逻辑，比如：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥" onload="initMap"></script>

然后在组件里监听这个事件，或者把初始化逻辑放在initMap函数里，配合React的生命周期使用。

• 容器尺寸必须明确：不管是用内联样式还是CSS类，一定要给地图容器设置宽高，否则地图会显示不出来。

• 清理内存：组件卸载时一定要清空容器，避免内存泄漏，尤其是在单页应用里，频繁切换组件的话这个很重要。

内容的提问来源于stack exchange，提问作者Sang Yun Park