地图移动时如何使标记始终居中?
How to make marker always centered when map is moving around?
我正在使用 react-google-maps 组件制作带有一个标记的地图。我做到了,而且效果很好,但问题是我希望标记始终居中。
我研究了 google,找到了几个解决方案:一个是 google API,但我不知道如何实现反应-google-地图,其次 - 在地图上添加假标记 - 我认为这不是好的解决方案。
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) 引入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>
);
}
Note: due to the usage of Hooks React version 16.8
or above is required
我正在使用 react-google-maps 组件制作带有一个标记的地图。我做到了,而且效果很好,但问题是我希望标记始终居中。
我研究了 google,找到了几个解决方案:一个是 google API,但我不知道如何实现反应-google-地图,其次 - 在地图上添加假标记 - 我认为这不是好的解决方案。
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) 引入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>
);
}
Note: due to the usage of Hooks React version
16.8
or above is required