javascript - 如何将谷歌地图标记固定在地图中心？

Question

我npm install --save google-map-react用来显示谷歌地图，这AnyReactComponent是标记。我已经给出了fixed位置和inset-0标记，但是当我开始拖动地图时，它不会停留在地图的中心，当我结束拖动时，固定位置就会起作用。我想要的是当用户开始拖动地图时，图钉应该只停留在中心。

<div
      className="mx-auto max-w-2xl relative"
      style={{ height: "100vh", width: "100%" }}
    >
      <GoogleMapReact
        bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_KEY }}
        defaultCenter={userInfo.center}
        defaultZoom={userInfo.zoom}
        onChange={(e) => updateMap(e)}
      >
        <AnyReactComponent
          lat={updatedPosition.lat}
          lng={updatedPosition.lng}
          text="My Marker"
        />
      </GoogleMapReact>
</div>

任何反应组件

const AnyReactComponent = ({ text }) => {
  return (
    <div className="bg-white sticky transform inset-0 z-50 ">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="h-6 w-6"
        viewBox="0 0 20 20"
        fill="#FFF"
      >
        <path
          fillRule="evenodd"
          d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
          clipRule="evenodd"
        />
      </svg>
      <span className="text-xl text-white">{text}</span>
    </div>
  );
};

标签： javascripthtmlcssreactjsgoogle-maps