react-google-maps在使用onClick事件时重置地图
react-google-maps在使用onClick事件时重置地图
提问于 2021-06-07 07:36:32
我很难实现一些简单的react-google-maps代码，无论何时单击标记或关闭信息框，地图都会将其位置重新设置为原始位置。我看到我应该与更改状态分开呈现map组件，但我不确定如何实现这一点。
任何帮助我们都将不胜感激
import React, {useState} from 'react';
import {Marker, GoogleMap,LoadScript,InfoWindow} from '@react-google-maps/api';
const MapContainer = ({markers}) => {
const [selected, setSelected] = useState<any>({})
const onSelect = (item) => {
setSelected(item)
}
const mapStyles = {
height: "100vh",
width: "100%",
}
const defaultCenter = {
lat: 45.510440, lng: -122.683338
}
const renderMap = () => {
return <>
<div>
<LoadScript
googleMapsApiKey='[GOOGLE API KEY]'>
<GoogleMap
mapContainerStyle={mapStyles}
zoom={13}
center={defaultCenter}
>
{markers.map((marker)=> {
return(
<Marker
position={{
lat: marker.lat,
lng: marker.lng
}}
title={marker.title}
onClick={ () => onSelect(marker) }
/>
)})
}
{
selected.lng &&
<InfoWindow
position={
{
lat: selected.lat,
lng: selected.lng
}
}
onCloseClick={() => setSelected({})}
>
<div>
<h3>{selected.title}</h3>
<p>{selected.info}</p>
</div>
</InfoWindow>
}
</GoogleMap>
</LoadScript>
</div>
</>
}
return renderMap()
}
export default MapContainer; ```回答 2
Stack Overflow用户
发布于 2021-06-10 08:36:37
似乎将中心值设置为一个状态，并将单击的标记坐标设置为新的中心，就可以解决这个问题。下面是一个sample code和一个代码片段：
import React, {useState} from 'react';
import {Marker, GoogleMap,LoadScript,InfoWindow} from '@react-google-maps/api';
import { render } from "react-dom";
import markers from "./data.json"
const MapContainer = () => {
const [selected, setSelected] = useState<any>({})
const [center,setCenter]= useState({
lat: 39.952584, lng: -75.165221
})
const onSelect = (item) => {
setSelected(item)
setCenter({
lat: item.lat, lng: item.lng
})
}
const mapStyles = {
height: "100vh",
width: "100%",
}
const renderMap = () => {
return <>
<div>
<LoadScript
googleMapsApiKey='AIzaSyBlfuRgAUDPGJnUpwyyhdSBIs193bXboMQ'>
<GoogleMap
mapContainerStyle={mapStyles}
zoom={13}
center={center}
>
{markers.map((marker,i)=> {
return(
<Marker
key={i}
position={{
lat: marker.lat,
lng: marker.lng
}}
title={marker.title}
onClick={ () => onSelect(marker) }
/>
)})
}
{
selected.lng &&
<InfoWindow
position={
{
lat: selected.lat,
lng: selected.lng
}
}
onCloseClick={() => setSelected({})}
>
<div>
<h3>{selected.id}</h3>
<p>{selected.name}</p>
</div>
</InfoWindow>
}
</GoogleMap>
</LoadScript>
</div>
</>
}
return renderMap()
}
render(<MapContainer />, document.getElementById('root'));Stack Overflow用户
发布于 2021-11-24 13:37:43
将中心置于一种状态，并在加载tiles后将其设置为null，如下所示：
import React, {useState} from 'react';
import {Marker, GoogleMap,LoadScript,InfoWindow} from '@react-google-maps/api';
const MapContainer = ({markers}) => {
const [selected, setSelected] = useState<any>({})
const onSelect = (item) => {
setSelected(item)
}
const mapStyles = {
height: "100vh",
width: "100%",
}
const defaultCenter = {
lat: 45.510440, lng: -122.683338
}
const [center, setCenter] = useState(defaultCenter)
const renderMap = () => {
return <>
<div>
<LoadScript
googleMapsApiKey='[GOOGLE API KEY]'>
<GoogleMap
mapContainerStyle={mapStyles}
zoom={13}
center={center}
onTilesLoaded={() => setCenter(null)}
>
{markers.map((marker)=> {
return(
<Marker
position={{
lat: marker.lat,
lng: marker.lng
}}
title={marker.title}
onClick={ () => onSelect(marker) }
/>
)})
}
{
selected.lng &&
<InfoWindow
position={
{
lat: selected.lat,
lng: selected.lng
}
}
onCloseClick={() => setSelected({})}
>
<div>
<h3>{selected.title}</h3>
<p>{selected.info}</p>
</div>
</InfoWindow>
}
</GoogleMap>
</LoadScript>
</div>
</>
}
return renderMap()
}
export default MapContainer;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67864491
复制相关文章
相似问题
腾讯云开发者
