Javascript 当地图移动时，如何使标记始终居中？

我正在使用谷歌地图组件制作带有一个标记的地图。我做到了，它工作得很好，但问题是我希望标记始终居中

我在谷歌上做了研究，找到了几个解决方案：一个是通过谷歌API，但我不知道如何实现对谷歌地图的反应，第二个是——在地图上添加假标记——我认为这不是一个好的解决方案

import React from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker} from 'react-google-maps';

function Map() {
    return(
        <GoogleMap
                defaultZoom={13}
                defaultCenter={{lat:54.68916, lng:25.2798}}
        >
           <Marker 
                position={{lat:54.68916, lng:25.2798}}
                draggable={true}
                onDragEnd={(e) => markerDrop(e)}
           />
        </GoogleMap>
    );
}

function markerDrop(event){
    //get values of marker
    let lat = event.latLng.lat();
    let lng = event.latLng.lng();
    //insert values to forms
    document.getElementById('location_latitude').value = lat;
    document.getElementById('location_longitude').value = lng;
    return
}


const WrappedMap = withScriptjs(withGoogleMap(Map));



export default function PickLocation(){
    return(
        <div>
            <WrappedMap 
                googleMapURL={'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSy'}
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `400px` }} />}
                mapElement={<div style={{ height: `100%` }} />}
            />
        </div>
    )
}

从“React”导入React；
从“react GoogleMaps”导入{GoogleMap，withScriptjs，withGoogleMap，Marker}；
函数映射（）{
返回(
markerDrop（e）}
/>
);
}
函数markerDrop（事件）{
//获取标记的值
设lat=event.latLng.lat（）；
设lng=event.latLng.lng（）；
//在表单中插入值
document.getElementById（'location_latitude'）。value=lat；
document.getElementById（'location_longitude'）。值=lng；
返回
}
const WrappedMap=withScriptjs（withGoogleMap（Map））；
导出默认函数PickLocation（）{
返回(
)
}

---

和结果必须类似于Uber拾取地图，其中标记在地图的中间，地图在移动。

< P>这是保持标记在地图移动上的变化的列表：

1） 引入

center

状态以保持标记位置：

const [center, setCenter] = useState(null);

2） 地图移动时（通过

bounds\u changed

或

拖动

事件侦听器）更新当前

center

：

const handleBoundsChanged = () => {
    const mapCenter = refMap.current.getCenter(); //get map center
    setCenter(mapCenter);
};

在哪里

示例

function Map() {
  const [center, setCenter] = useState({ lat: 54.68916, lng: 25.2798 });
  const refMap = useRef(null);

  const handleBoundsChanged = () => {
    const mapCenter = refMap.current.getCenter(); //get map center
    setCenter(mapCenter);
  };

  return (
    <GoogleMap
      ref={refMap}
      defaultZoom={13}
      defaultCenter={{ lat: 54.68916, lng: 25.2798 }}
      onBoundsChanged={useCallback(handleBoundsChanged)}
    >
      <Marker position={center} />
    </GoogleMap>
  );
}

函数映射（）{
const[center，setCenter]=useState（{lat:54.68916，lng:25.2798}）；
const refMap=useRef（null）；
康斯特车把边长=（）=>{
const mapCenter=refMap.current.getCenter（）；//获取地图中心
赛特中心（地图中心）；
};
返回(
);
}

注意：由于使用React版本

16.8

或更高版本，因此需要

---

您可以通过将

GoogleMap

组件的

center

属性设置为与标记相同的lat lng来实现这一点。例如：

我以前尝试过此解决方案，但后来控制台中出现错误，类型错误：无法读取未定义的属性“props”。要执行此操作，必须在标记位置更改时更改

映射的组件属性或状态。您必须将
映射到一个类组件或一个将属性作为参数接收的函数。这对我很有用，帮助我找出了错误（使用）
<Marker  position={center} />

function Map() {
  const [center, setCenter] = useState({ lat: 54.68916, lng: 25.2798 });
  const refMap = useRef(null);

  const handleBoundsChanged = () => {
    const mapCenter = refMap.current.getCenter(); //get map center
    setCenter(mapCenter);
  };

  return (
    <GoogleMap
      ref={refMap}
      defaultZoom={13}
      defaultCenter={{ lat: 54.68916, lng: 25.2798 }}
      onBoundsChanged={useCallback(handleBoundsChanged)}
    >
      <Marker position={center} />
    </GoogleMap>
  );
}