reactjs - onclick 后 react-google-maps 地图刷新

Question

我在 Map 组件中使用 react-google-maps ，每当我单击标记时，都会发生两件奇怪的事情。首先，有两个InfoWindow的开口，一个是空白的，一个是我的div。此外，每当执行 onclick 时，地图都会刷新，这不是我想要的。我从 App.js 调用我的 Map 组件。

import React, { useState, Component } from'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from "react-google-maps";

    function Map(props) {
        const WrappedMap = withScriptjs(withGoogleMap(CreateMap))
        const [selectedPatio, setSelectedPatio] = useState(null)

        function CreateMap(){
            return (
                <GoogleMap
                    defaultZoom={13}
                    defaultCenter={{ lat: 49.278352, lng: -123.122538 }}
                >
                {props.patios.map((patio) => (
                    <Marker 
                        key={patio.name}
                        position={{
                            lat: patio.lat, 
                            lng: patio.lng}}
                        onClick={() => {
                            setSelectedPatio(patio);
                        }}
                    />
                ))}

                {selectedPatio && (
                    <InfoWindow
                    onCloseClick={() => {
                        setSelectedPatio(null);
                    }}
                    position={{
                        lat: selectedPatio.lat,
                        lng: selectedPatio.lng
                    }}
                    >
                    <div>
                        asd
                    </div>
                    </InfoWindow>
                )}
                </GoogleMap>)
        }

        return (
            <WrappedMap
            googleMapURL={'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=gemotry,drawing,places&key=XXX'}
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `100%` }} />}
            mapElement={<div style={{ height: `100%` }} />}
    />
        );
    }

export default Map

//This is what my render looks like in app.js where i'm calling Map and sending an array of patios to props

render() {
    return (
        <BrowserRouter>      
        <NavBar data={{ icon:"location", text1:"Map", text2:"About"}}></NavBar>
        <div style={{  width: `100vw` , height: `75vh`, maxWidth: `100%` }}>
        <Map patios={this.state.patios}/>
        <div>
          <PatioMasonry patios={this.state.patios}/>
        </div>
        </div>
        <div>
          <BottomNavBar/>
        </div>
        <div>
            <Switch>
              <Route path="/" component={Homescreen} exact/>
           </Switch>
        </div> 
      </BrowserRouter>
    );
  }
}

标签： reactjsreact-google-maps

Answer 1

您正在另一个功能组件中定义一个功能组件。通过这样做，当父组件重新渲染时，会创建一个新的子组件实例，并且重新挂载该组件而不是重新渲染。因此，您的地图正在刷新。

将组件移到组件CreateMap之外Map

import React, { useState, Component } from'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from "react-google-maps";

const WrappedMap = withScriptjs(withGoogleMap(CreateMap))

function CreateMap(){
    const [selectedPatio, setSelectedPatio] = useState(null)    
    return (
        <GoogleMap
            defaultZoom={13}
            defaultCenter={{ lat: 49.278352, lng: -123.122538 }}
        >
        {props.patios.map((patio) => (
            <Marker 
                key={patio.name}
                position={{
                    lat: patio.lat, 
                    lng: patio.lng}}
                onClick={() => {
                    setSelectedPatio(patio);
                }}
            />
        ))}

        {selectedPatio && (
            <InfoWindow
            onCloseClick={() => {
                setSelectedPatio(null);
            }}
            position={{
                lat: selectedPatio.lat,
                lng: selectedPatio.lng
            }}
            >
            <div>
                asd
            </div>
            </InfoWindow>
        )}
        </GoogleMap>)
}
    function Map(props) {

        return (
            <WrappedMap
            googleMapURL={'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=gemotry,drawing,places&key=XXX'}
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `100%` }} />}
            mapElement={<div style={{ height: `100%` }} />}
            />
        );
    }

export default Map