onclick 后 react-google-maps 地图刷新答案

【问题标题】：react-google-maps map refreshes after onclickonclick 后 react-google-maps 地图刷新
【发布时间】：2020-08-19 16:14:06
【问题描述】：

我在地图组件中使用 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>
    );
  }
}

【问题讨论】：

问题是？
我认为您应该将Map 和CreateMap 分开为两个不同的组件。因为谷歌地图给出了关于它在页面中调用两次的错误。我认为您的组件正在渲染两次。也许您可以使用此处提到的noRedraw 道具：tomchentw.github.io/react-google-maps/#marker 此外，您可以在此页面中看到 Google Maps API 存在问题。也许您应该更改库或创建自己的库。 Google Maps API 是结构最精美的 API 之一。

标签： reactjs react-google-maps

【解决方案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

【讨论】：