当地图四处移动时,如何使标记始终居中? [英] How to make marker always centered when map is moving around?
问题描述
我正在使用react-google-maps组件制作带有一个标记的地图.我做到了,它运行正常,但是问题是我希望标记始终居中.
I am using react-google-maps component to make map with one marker. I did it and it is working perfectly, but the problem is that I want that marker will be always centered.
我曾经在Google上进行过研究,并找到了几种解决方案:一种是通过Google API实现的,但我不知道如何实现对Google Maps的反应,其次-在地图上添加假标记-我认为不是很好的解决方案.
I did research on google, and find out several solutions: one is by google API, but I don't get it how to implement to react-google-maps, and second - add fake marker over map - which I think isn't good solution.
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>
)
}
和的结果必须与超级拾取地图相似,其中标记位于地图的中间,地图在四处移动.
At the and result have to be similar as uber pick up map, where marker is in the middle of the map, and map is moving around.
推荐答案
以下是使标记保持在地图移动中心的更改列表:
Here is the list of changes to keep marker centered on map move:
1)引入center
状态以保持标记位置:
1) introduce center
state to keep marker position:
const [center, setCenter] = useState(null);
2)在地图上移动(通过bounds_changed
或drag
事件监听器)更新当前center
:
2) on map move (via bounds_changed
or drag
event listener ) update current center
:
const handleBoundsChanged = () => {
const mapCenter = refMap.current.getCenter(); //get map center
setCenter(mapCenter);
};
其中
<GoogleMap
ref={refMap}
onBoundsChanged={handleBoundsChanged}
...
/>
3)通过传递center
状态的位置标记:
3) position marker by passing center
state:
<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 React版本
16.8
或更高版本,必填
Note: due to the usage of Hooks React version
16.8
or above is required
这篇关于当地图四处移动时,如何使标记始终居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!