Маркер Google-карты-реакции не показывает InfoWindow на клике - PullRequest
Новая
       29

Маркер Google-карты-реакции не показывает InfoWindow на клике

0 голосов
/ 21 октября 2019

Когда я щелкаю маркер карт Google, он регистрирует щелчок, но я не могу появиться, чтобы окно InfoWindow появилось после изменения состояния.

Пробная установка / чтение из обновленного состояния при нажатии

'' 'реаги * 

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

export class BathroomMap extends React.Component{

constructor(props){
    super(props);
    this.state = {
        gmapsAPI: "https://maps.googleapis.com/maps/api/js?key="+ this.API_KEY +"&callback=initMap",
        center: {
            lat: 40.7367,
            lng: -73.9899
          },
        zoom: 15,
        showingInfoWindow: false,
        activeMarker: {},
        selectedPlace: {},
        infoWindowOpen: false,
    }

    this.handleToggleOpen = this.handleToggleOpen.bind(this);
}

handleToggleOpen = () => {
    console.log("Marker Clicked");
    this.setState({
       infoWindowOpen: !this.state.infoWindowOpen,
    });
}

render() {
    return (

            <Map google={window.google} zoom={14} initialCenter={this.state.center}>
                <Marker onClick={this.handleToggleOpen}
                    name={'Current location'} />
                <InfoWindow open={this.state.infoWindowOpen} onClose={this.onInfoWindowClose}>
                    <div>
                        <h1>Marker Info Placeholder</h1>
                    </div>
                </InfoWindow>
            </Map>

    );
}
}

BathroomMap = GoogleApiWrapper({
  apiKey: (/*Omitted*/)
})(BathroomMap)

' ''

Я ожидал, что маркер карты Google сПоявляется какое-то InfowWindow, но вместо этого infowWindowOpened возвращает undefined

1 Ответ

0 голосов
/ 24 октября 2019

Документация google-maps-реакции в InfoWindow гласит следующее:

Видимость компонента <InfoWindow /> контролируется видимой подпоркой. Видимый реквизит - это логическое значение (PropTypes.bool), которое показывает <InfoWindow />, когда оно истинно, и скрывает его, когда оно ложно.

Существует два способа управления положением компонента <InfoWindow />. Вы можете использовать position prop или подключить компонент <InfoWindow /> напрямую к существующему компоненту <Marker />, используя marker prop.

В вашей реализации кода вам не хватаетvisible опора и либо position опора, либо marker опора. Вот почему ваше информационное окно не отображается.

Мой ответ и связанные codesandbox в соответствующей теме React и google-maps-реакции. Надеемся, что не отображение InfoWindow поможет вам.

...