Реакция GoogleMaps: открыть InfoWindow по умолчанию, а не из onClick - PullRequest
Новая
       23

Реакция GoogleMaps: открыть InfoWindow по умолчанию, а не из onClick

0 голосов
/ 06 февраля 2019

Мне бы хотелось, чтобы информационное окно открывалось по умолчанию над маркером в компоненте карт Google в моем реактивном проекте.

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

Однако я обнаружил, что состояние не обновляется, несмотря на мой вызов setState.Я попытался сделать это в componentDidMount, а также попытался установить состояние непосредственно в обработчике монтирования маркера.

Состояние успешно изменено, если щелкнуть маркер вручную.

Я видел this решение, но это немного не элегантно, поскольку использование его в рамках реакции идет, и я разочарован тем, что не вижу проблем с моей логикой.Это должно работать, и я хотел бы знать, почему это не так.

Любая помощь будет принята с благодарностью - мой код ниже: 

import { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

const style = {
    height:'400px',
    width: '100%'
}

class MapView extends Component {

    constructor() {
        super();
        this.state = {
        showingInfoWindow: true, 
        activeMarker: {},         
        selectedPlace: {}         
      };
    }

    onMarkerClick = (props, marker, e) => {
        this.setState(prevState => ({
        selectedPlace: props,
        activeMarker: marker,
        showingInfoWindow: true
      }));
    }

    onMarkerMounted = element => this.onMarkerClick(element.props, element.marker, element);

    onClose = () => {
      if (this.state.showingInfoWindow) {
        this.setState({
          showingInfoWindow: false,
          activeMarker: null
        });
      }
    };

    render() {
        return(
            <Map
              google={this.props.google}
              style={style}
              initialCenter={{
                lat: {redacted},
                lng: {redacted}
              }}
              zoom={15}
              onClick={this.onMapClicked}
            >
                <Marker ref={this.onMarkerMounted} onClick={this.onMarkerClick}/>
                <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            Your Location Here!
          </div>
        </InfoWindow>

            </Map>
        );
    }
} 

export default GoogleApiWrapper({
  apiKey: ('MY_API_KEY')
})(MapView);

1 Ответ

0 голосов
/ 07 февраля 2019

Полагаю, с вашим примером все в порядке.Похоже, причина того, что информационное окно не отображается, заключается в том, что карта еще не полностью загружена после запуска функции onMarkerMounted.

Вот список изменений для отображения информационного окна после загрузки карты:

a) введите состояние mapLoaded, чтобы отслеживать, была ли карта загружена или нет: 

this.state = {
  //...  
  mapLoaded: false
};

и установите его на true после загрузки карты: 

handleMapIdle = () => {
    this.setState({
      mapLoaded: true
    });
}


<Map
    google={this.props.google}
    style={style}
    initialCenter={this.props.center}
    zoom={this.props.zoom}
    onIdle={this.handleMapIdle}
  >
  ...
</Map>

и, наконец, инициализируйте маркер после загрузки карты: 

{this.state.mapLoaded && (
   <Marker ref={this.onMarkerMounted} onClick={this.onMarkerClick} />
)}

Вот демоверсия

...