3

我有一个单页应用程序，使用 reactjs 和 react-router。我开发了一个地图组件，如果我尝试清理组件上的地图并在组件上重新安装并重建它，那么谷歌地图当然会从一个屏幕到另一个屏幕发生内存泄漏。所以我尝试了这种方法：

销毁地图实例的正确方法是什么

并且重新使用地图实例和节点结合过度的清理措施效果很好并且稳定了事情。为了清理，我

  • 在每个标记、地图、窗口和文档上调用 clearInstanceListeners
  • 在任何标记上将地图设置为空
  • 删除组件上的 this.map 然后将其设置为 null
  • 删除 this.markers 然后将其设置为空数组

我此时遇到的问题是，当我触发调整大小时，它不是调整大小。在阅读了其他几篇文章后，并确保我在显示 div 后触发，它不会调整大小。但是，我有一个绑定到 window.onresize 的调整大小函数，并且注意到在调整窗口大小之后，以及第二次调用该函数时，地图会调整大小并居中。这是那个功能：

sizeMapToContainer: function () {

    google.maps.event.trigger(this.map, 'resize');

    if (this.props.fitBounds) {
      this.zoomInOnMarkers();
    } else {
      this.map.setCenter(new google.maps.LatLng(this.props.center[1],      this.props.center[0]));
      this.map.setZoom(this.props.zoom);
    }

 },

以及窗口调整大小的功能：

window.onresize = function onResize () {
  if (this.map) {
    this.sizeMapToContainer();
  }
}.bind(this);

我对 react 的渲染调用只返回一个 div，稍后在 mount 时我自己附加了地图 div。

buildMap: function (nextProps) {

  var mapProps;

  if (nextProps) {
    mapProps = nextProps;
  } else {
    mapProps = this.props;
  }

  var centerpoint = mapProps.center;
  var zoom = mapProps.zoom || 8;
  var center = new google.maps.LatLng(centerpoint[1], centerpoint[0]);
  var mapNode = this.refs.map.getDOMNode();
  var mapOptions = {
    center: center,
    zoom: zoom
  };

  if (mapInstance.map) {
    window.tmMap = this.map = mapInstance.map;
    //check if the nodes are already there
    if (!mapNode.hasChildNodes()) {
      mapNode.appendChild(mapInstance.node);
    }
    this.map.setOptions(mapOptions);
  } else {
    mapInstance.node = document.createElement('div');
    mapInstance.node.classList.add('full-height');
    mapInstance.map = new google.maps.Map(mapInstance.node, mapOptions);
    window.tmMap = this.map = mapInstance.map;
    mapNode.appendChild(mapInstance.node);
    this.map.setOptions(mapOptions);
  }

  this.buildMarkers();

  this.setMarkers();

  this.bindMarkers();

  google.maps.event.addListener(this.map, 'idle', this.onIdle);

},

该组件是一个嵌套组件。

请让我知道是否有任何其他代码可以提供帮助。我当然是使用最新的google maps api，直接使用。

4

0 回答 0