react- google-maps карта обновляется после onclick - PullRequest
Новая
       29

react- google-maps карта обновляется после onclick

0 голосов
/ 05 мая 2020

Я использую response- google-maps в компоненте Map, и всякий раз, когда я нажимаю на маркер, происходят две странные вещи. Во-первых, есть два открытия InfoWindow, одно пустое и одно с моим div. Кроме того, всякий раз, когда выполняется onclick, карта обновляется, чего я не хочу. Я вызываю свой компонент карты из приложения. js. 

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>
    );
  }
}

1 Ответ

1 голос
/ 05 мая 2020

Вы определяете функциональный компонент внутри другого функционального компонента. Таким образом, когда родительский компонент выполняет повторную визуализацию, создается новый экземпляр дочернего компонента, и компонент повторно монтируется вместо повторной визуализации. Поэтому ваша карта обновляется.

Переместите компонент 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
...