javascript - 如何通过点击事件指向地图上的位置

Question

在 React 中，我正在尝试使用 google-map-react 库将 onClick 事件点作为地图上的标记指向新位置。我的地图正在显示，我在地图上有一个按钮，但我不确定如何在地图上制作一个标记指向我拥有的新坐标。google-map-react 上的文档不是很有帮助。我尝试使用 onChildClick 参数设置新坐标，如下面的代码所示，但它不起作用。以下是我的一段代码

...<GoogleMapReact
        bootstrapURLKeys={{
          key: 'API_KEY',
        }}
        defaultCenter={mapProp.center}
        defaultZoom={mapProp.zoom}
        options={mapOptions}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
        onChildClick={() => {
          setCoord({
            latitude: coord.latitude,
            longitude: coord.longitude,
          });
        }}
      >
        <Button
          variant="light"
          style={{
            position: 'absolute',
            left: '-20%',
            top: '-340px',
          }}
          onClick={handleCoordinates}
        >
          Find new place button
        </Button>
        {cardVisible && <MyMarker />}
        {cardVisible && (
          <MarkerComponent
            lat={59.965411}
            lng={30.377844}
            text={'Location Marker info here!'}
          />
        )}
      </GoogleMapReact>

Answer 1

您的代码永远不会更新标记的位置。

const [coord, setCoord] = useState({latitude: 59.965411, longitude:30.377844});

...

return ...<GoogleMapReact
       ...
         <MarkerComponent
            lat={coord.latitude}
            lng={coord.longitude}
            text={'Location Marker info here!'}
          />