Question

我试图在我的React应用中的Bootstrap模式中显示Google地图。

我的模态只会在设置this.props.showMap时显示地图，如下所示：

export default class MapModal extends Component {
  ...

  componentDidMount() {
    var map = new google.maps.Map(document.getElementById("map"), {...});
    $('#myModal').on('shown.bs.modal', () => {
      google.maps.event.trigger(map, "resize");
    });
  }
  render() {
      return (
        <div className = 'modal fade' id = 'myModal' role = 'dialog'>
          <div className = 'modal-dialog'>
            <div className = 'modal-content'>
            ...
            {
              this.props.showMap ?
                <div id = 'map' />
                :
                null
            }
            </div>
        </div>
      </div>
    )
  }
}

打开模态的按钮是这样的：

<MapModal showMap={this.state.showMap} />
...

<button
  type="button"
  onClick={() => { this.setState({ showMap: true }); } }
  data-toggle="modal"
  data-target="#myModal"
  >
  Show
</button>

除非我将this.state.showMap的值从true切换为false，否则模态会正确显示地图。

例如，当我打开this.state.showMap作为false的模态时，地图会从模态中移除（如预期的那样）。但是当我尝试再次打开模式时，this.state.showMap为true，地图仍然没有出现。

我在哪里错了？

Answer 1

因为当您将showMap更改为false时，您已经从Dom对象中删除了该地图。所以你必须再次启动地图。
或者，您可以添加css类或内联样式来显示或隐藏地图，而不是渲染null。

Google地图从Bootstrap模式中消失

1 个答案: