谷歌地图从引导模式中消失答案

【问题标题】：Google map disappears from Bootstrap modal谷歌地图从引导模式中消失
【发布时间】：2017-01-11 05:25:59
【问题描述】：

我正在尝试在我的 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，地图仍然没有出现。

我哪里错了？

【问题讨论】：

重新打开时如何更改 showMap 状态，是否检查过该值是否确实在更改？
@Jayce444 其实，这不是状态，而是在条件中检查的道具。并且在打开模式时设置this.props.showMap。我现在已经更新了问题:)
我认为您必须在使用 id 映射创建 dom 元素后执行映射的初始化代码。
@SimonMüller 我也这么认为，但我不想每次打开模式时都重新初始化地图，因为这可能会导致性能下降和/或内存泄漏。如果我在地图未显示时尝试初始化新实例，前一个地图的实例会发生什么情况？前一个实例的处理是否正确，还是会导致同一页面上出现多个地图副本？

标签： jquery twitter-bootstrap google-maps reactjs bootstrap-modal

【解决方案1】：

因为当你将 showMap 更改为 false 时，你已经从 Dom 对象中移除了地图。所以你必须重新初始化地图。
或者，您可以添加一个 css 类或内联样式来显示或隐藏地图，而不是呈现 null。

【讨论】：