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

IT技术 javascript reactjs google-maps react-google-maps
2021-04-17 05:49:41

我正在使用 react-google-maps 组件制作带有一个标记的地图。我做到了，它运行良好，但问题是我希望该标记始终居中。

我对谷歌进行了研究，并找到了几种解决方案：一个是通过谷歌 API，但我不明白如何实现 react-google-maps，第二个 - 在地图上添加假标记 - 我认为不是很好的解决方案。

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>
    )
}

结果必须与超级拾取地图类似，其中标记位于地图中间，并且地图四处移动。

1个回答

以下是在地图移动时保持标记居中的更改列表：

1) 引入center状态以保持标记位置： 

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

2）在地图移动（通过bounds_changed或drag事件监听器）更新当前center： 

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

在哪里

<GoogleMap 
   ref={refMap}
   onBoundsChanged={handleBoundsChanged} 
   ...
/>

3）通过center状态定位标记：

<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>
  );
}

这是一个演示

注意：由于使用Hooks 需要React16.8或以上版本

如果您使用@react-google-maps/api，则应使用事件 onIdle 而不是 OnBoundsChanged。示例：onIdle={useCallback(handleBoundsChanged)}
2021-06-14 05:49:41
这对我有用，帮助我找出我的错误（使用react-google-maps-api-docs.netlify.app/#googlemap）
2021-06-18 05:49:41
其它你可能感兴趣的问题
上一篇React 在 useEffect 中重写 componentWillReceiveProps 下一篇如何在reactjs中添加多个对象？