Как правильно отобразить всплывающее окно после нажатия на маркер - PullRequest
Новая
       11

Как правильно отобразить всплывающее окно после нажатия на маркер

0 голосов
/ 26 февраля 2020

Я пытаюсь показать всплывающее окно после нажатия на маркер на Google-карте, но без особого успеха. Ниже наиболее важная часть кода:

ShipTracker. js

import { InfoWindow } from 'google-map-react';
const Ship = ({ ship, logoMap, logoClick }) => {
    const shipName = ship.NAME;
    const company = shipCompanyMap[shipName];

    const img = logoMap[company && company.split(' ').join('').toUpperCase()];
    return (
        <div onClick={(event) => logoClick(event, ship)}>
            {/* Render shipImage image */}
            <img src={img} alt="Logo" />
            <InfoWindow>
                <div>Vessel Details</div>
            </InfoWindow>
        </div>
    );
};
export { Ship };

GoogleMap. js

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ships: [],
            type: 'All',
            shipTypes: [],
            activeShipTypes: [],
            logoMap: {}
        };
        this.updateRequest = this.updateRequest.bind(this);
        this.countDownInterval = null;
    }

    // Other operations ....

    handleMarkerClick = (event, data) => {
        console.log(event.target, data);
        this.props.setActiveShip(data.NAME, data.LATITUDE, data.LONGITUDE, this.state.ships.images);
    };

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'My_KEY' }}
                    center={{
                        lat: this.props.activeShip ? this.props.activeShip.latitude : 42.4,
                        lng: this.props.activeShip ? this.props.activeShip.longitude : -71.1
                    }}
                    zoom={8}
                >
                    {/* Rendering all the markers here and the infoWindow*/}
                    {this.state.ships.map((ship) => (
                        <Ship
                            ship={ship}
                            key={ship.MMSI}
                            lat={ship.LATITUDE}
                            lng={ship.LONGITUDE}
                            logoMap={this.state.logoMap}
                            logoClick={this.handleMarkerClick}
                            windowBoxClick={this.infoWindowClick}
                        />
                    ))}
                </GoogleMapReact>
            </div>
        );
    }
}


export default class GoogleMap extends React.Component {
    state = {
        ships: [],
        activeShipTypes: [],
        activeCompanies: [],
        activeShip: null
    };

    setActiveShip = (name, latitude, longitude) => {
        this.setState({
            activeShip: {
                name,
                latitude,
                longitude
            }
        });
    };

    render() {
        return (
            <MapContainer>
                {/* This is the Google Map Tracking Page */}
                <BoatMap
                    setActiveShip={this.setActiveShip}
                    activeShip={this.state.activeShip}
                    handleDropdownChange={this.handleDropdownChange}
                />
                <ShipTracker
                    ships={this.state.ships}
                    setActiveShip={this.setActiveShip}
                    onMarkerClick={this.handleMarkerClick}
                    onWindowClick={this.infoWindowClick}
                />
            </MapContainer>
        );
    }
}

Что я сделал до сих пор:

1) Я успешно могу нажать на маркер. Я могу подтвердить, что, поскольку я console.log() и дважды проверил, что я получаю правильные данные.

2) Через этот пост было полезно понять природу проблемы, однако я не удалось решить проблему.

3) Этот источник также был полезен, но, как и в пункте 2), он, похоже, использует react-modal, но я хотел бы показать infoBox поэтому я не уверен, что react-modal будет хорошим решением.

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

...