React/Next.js使用Google Maps API如何实现点击添加/替换地图标记

你的代码不生效的核心问题：

• guessCoords是组件外的普通变量，修改它不会触发React重渲染，<Marker>组件拿不到最新的坐标值，自然不会更新位置。

React的视图更新完全由状态驱动，你要实现单标记点击切换的效果，根本不需要手动写删除旧标记的逻辑——只要更新标记绑定的position状态，重渲染时旧标记会自动替换为新位置的标记。

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

function Map() {
  // 用state存储标记坐标，初始值为null时不渲染标记
  const [guessCoords, setGuessCoords] = useState(null);
  const center = useMemo(() => ({ lat: 44, lng: -80 }), []);

  const handleMapClick = (e) => {
    const lat = e.latLng.lat();
    const lng = e.latLng.lng();
    setGuessCoords({ lat, lng });
  };

  return (
    <GoogleMap
      zoom={10}
      center={center}
      streetView={false}
      mapTypeId="roadmap"
      mapContainerClassName="w-full h-full absolute"
      mapTypeControls={false}
      onClick={handleMapClick}
    >
      {guessCoords && <Marker position={guessCoords} />}
    </GoogleMap>
  );
}

• 首次加载地图时无标记
• 点击地图时，获取点击点经纬度更新state，标记渲染在对应位置
• 后续每次点击，state更新触发重渲染，标记直接跳转到新点击位置，旧标记自动移除
• 适配Next.js客户端组件渲染规则，不会出现水合错误

内容的提问来源于stack exchange，提问作者Code With Anish