[英]how to re-center react-google-maps on adding marker
I'm using @react-google-maps/api to show a few markers in a map.我正在使用@react-google-maps/api 在 map 中显示一些标记。
I want to add another marker on button click, and when the marker has been added, I want the map to be centered so it shows all the markers.我想在单击按钮时添加另一个标记,添加标记后,我希望 map 居中,以便显示所有标记。 According to this, this is what I wrote:
据此,这是我写的:
const center = {
lat: 55.378,
lng: 3.436
};
const containerStyle = {
borderRadius: '10px',
width: '100%',
height: '100%'
}
function Map(props) {
const [map, setMap] = useState();
const [markers, setMarkers] = useState([
{
lat: 51.378,
lng: 3.436
},
{
lat: 47.0902,
lng: -125.712
}
]);
useEffect(() => {
var bounds = new window.google.maps.LatLngBounds();
for(var i = 0; i < markers.length; i++) {
bounds.extend( new window.google.maps.LatLng(markers[i].lat, markers[i].lng));
}
map.fitBounds(bounds)
}, [markers])
const onLoad = React.useCallback(function callback(map) {
const bound = new window.google.maps.LatLngBounds();
setBounds(bound)
map.fitBounds(bound);
setMap(map)
}, [])
return (
<>
<div className={props.className}>
<LoadScript
googleMapsApiKey="API_KEY"
>
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
onLoad={onLoad}
>
{
markers.map((item) => {
return (
<Marker animation="DROP" position={{lat: item.lat, lng: item.lng}}/>
)
})
}
</GoogleMap>
</LoadScript>
</div>
<button onClick={(e) => { e.preventDefault(); console.log("hehe"); const hoho = [...markers, {lat: 59.913, lng: 10.752}]; setMarkers(hoho)}}>Add marker</button>
</>
)
}
But when I run the code, this is the error I get:但是当我运行代码时,这是我得到的错误:
TypeError: Cannot read properties of undefined (reading 'maps').
It is this line in the useEffect that is giving me the error:正是 useEffect 中的这一行给了我错误:
var bounds = new window.google.maps.LatLngBounds();
How can I get a correct value of bounds?如何获得正确的边界值? I tried to make a state variable and update the value once I got it in onLoad(), but that didn't work either.
我尝试创建一个 state 变量,并在我将其放入 onLoad() 后更新该值,但这也不起作用。 How can I fix this?
我怎样才能解决这个问题?
Your useEffect
is executing before <LoadScript>
has loaded the API.您的
useEffect
在<LoadScript>
加载 API 之前执行。 I would do something like:我会做类似的事情:
useEffect(() => {
if (map) {
var bounds = new window.google.maps.LatLngBounds();
for(var i = 0; i < markers.length; i++) {
bounds.extend( new window.google.maps.LatLng(markers[i].lat, markers[i].lng));
}
map.fitBounds(bounds)
}
}, [markers, map])
map
will only be defined if the API, window.google.maps.***
has been loaded.仅当
map
、 window.google.maps.***
已加载时,才会定义 map。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.