Google-map-react - reactjs：如何在点击标记后动态显示弹出窗口

Question

我正在使用 AISHub 构建一个船舶可视化器。我能够使用纬度/经度找到我想要的船只并将它们显示在地图上。但是船只（标记）太多了，我不知道谁是谁。

问题：如何在单击如下标记后动态显示弹出窗口？

下面是我使用的代码最重要的部分：

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

// ... other operations
// ... other operations

    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 */}
                    {this.state.ships.map((ship) => (
                        <Ship
                            ship={ship}
                            key={ship.CALLSIGN}
                            lat={ship.LATITUDE}
                            lng={ship.LONGITUDE}
                            logoMap={this.state.logoMap}
                        />
                    ))}

                    <select className="combo-companies" onClick={this.props.handleDropdownChange}>
                        <option value="All">All</option>

                        {this.state.shipTypes.map((type) => (
                            <option
                                className={this.state.activeShipTypes.includes(type) ? 'active' : ''}
                                key={type}
                                value={type}
                            >
                                {type}
                            </option>
                        ))}
                    </select>
                </GoogleMapReact>
            </div>
        );
    }
}

到目前为止我做了什么：

1）我发现这篇文章对理解程序很有用。但不幸的是我无法解决它。

2）我也发现这个非常有用，但有两个问题阻止我使用它：a）信息框不是动态的，b）我正在使用google-map-react但帖子不是：

3）最后，我尝试编写自己的组件InfoWindowBox.js，以下是我到目前为止所做的，但不知道我是否朝着正确的方向前进，以及是否应该在初始代码中实现：

信息窗口框.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { InfoWindow } from 'google-maps-react';

export default class InfoWindowEx extends Component {
    constructor(props) {
        super(props);
        this.infoWindowRef = React.createRef();
        this.contentElement = document.createElement(`div`);
    }

    componentDidUpdate(prevProps) {
        if (this.props.children !== prevProps.children) {
            ReactDOM.render(React.Children.only(this.props.children), this.contentElement);
            this.infoWindowRef.current.infowindow.setContent(this.contentElement);
        }
    }

    render() {
        return <InfoWindow ref={this.infoWindowRef} {...this.props} />;
    }
}

请有没有人经历过这个，当我没有想法时，请指导解决它的正确方向。

Answer 1

我能说的最好的是，有 2 种方法可以添加到 Popups，它们都不是google-map-react包本机的（建议在地图上使用 react 组件）。您可以定位<Popup />要么position: absolute，或通过传递lng和lat到<Popup />。

第 1 步：创建一个标准react组件，我们称之为<Popup />.

第 2 步，选项 A：使用 CSS 定位

分配position: absolute给<Popup />. 这将允许您避免使用数学来确定弹出窗口何时呈现屏幕外/视口外）。将 与<Popup />相邻（的兄弟）放置<GoogleMapReact>，并将父容器指定为position: relative。

<div style={{ height: '100vh', width: '100%', position: 'relative' }}>
  <GoogleMapReact
    bootstrapURLKeys={{ key: 'SECRETS' }}
    defaultCenter={defaults.center}
    defaultZoom={defaults.zoom}
  >
    {markers.map((marker) => (
      <Marker
        key={marker.id}
        lat={marker.latitude}
        lng={marker.longitude}
        onClick={() => setPopupInfo(marker)}
      />
    ))}
  </GoogleMapReact>
  {popupInfo && (<Popup store={popupInfo} style={{ position: 'absolute', top: 0, left: 0, width: '200px' }} />)}
</div>

第 2 步，选项 B：使用地图 lat/lng 定位

或者，您可以将lat和lng作为道具传递给<Popup />. 为了使其工作，Popup应该是<GoogleMapReact>.

<div>
  <GoogleMapReact
    bootstrapURLKeys={{ key: 'SECRETS' }}
    defaultCenter={defaults.center}
    defaultZoom={defaults.zoom}
  >
    {markers.map((marker) => (
      <Marker
        key={marker.id}
        lat={marker.latitude}
        lng={marker.longitude}
        onClick={() => setPopupInfo(marker)}
      />
    ))}
    {popupInfo && (<Popup
      store={popupInfo}
      lat={popupInfo.latitude}
      lng={popupInfo.longitude}
     />)}
  </GoogleMapReact>
</div>