如何在单击的位置添加标记（react/nextjs Google Maps API）

Question

我正在尝试做到这一点，以便当我单击地图时，我可以在鼠标点击的位置上放置标记。 （删除上一个标记）这是我的代码：

const guessCoords = null;

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

function Map() {
  const center = useMemo(() => ({ lat: 44, lng: -80 }), []);

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

我正在使用nextjs。我看了看，没有找到任何用例。

Answer 1

首先，这应该是对您的问题的评论，而不是答案，但Stackoverflow不允许我写评论...所以我尝试以这种方式为您提供帮助！

您正在使用什么组件进行Google Maps集成？我可以向您推荐Google-map-react，对我们有好处。

我建议您修复打字稿代码！
GuessCoords 不应该是const，因为它在您的单击方法中进行了更改。
此代码片段在打字稿中是正确的：

let guessCoords;

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