尝试放大和缩小div标签中包含的地图时，无法完全加载小叶地图切片

Question

我正在尝试在div标签中加载一个传单地图。

有时地图瓦片会完全加载。每当我尝试放大或缩小地图时，磁贴都不能完全加载。我尝试了导入leaflet CSS样式之类的解决方案，尝试在地图放大时调用invalidateSize函数。

​

​

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import L from 'leaflet';
import {} from "mapbox-gl-leaflet";
import 'leaflet-fullscreen';
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import 'leaflet.gridlayer.googlemutant';

class Map extends Component {

  componentDidMount() {
    this.initializeMap();
  }

  initializeMap = () => {
    const { defaultLocation,
      handleCloseMap, handleFieldErrorChanged, user } = this.props;
    this.map = L.map('map', {
      center: [...defaultLocation].reverse(),
      zoom: 20,
      fullscreenControl: true
    });
      L.gridLayer.googleMutant({ type: 'satellite', maxZoom: 20 }).addTo(this.map);
        }
      });
    }
  }


  render() {
    return <div id="map" className={styles.map} />;
  }
}

Answer 1

而试图在仅使用Javascript的情况下重复上述问题。地图被正确渲染，因此我得出结论，渲染地图没有问题。在调试时，我发现包含map的div元素有一个其父元素的属性为text-align: center，这会导致map不能完全加载tiles。删除它后，地图会按预期呈现。我希望它能帮助某些人在渲染元素(如div)中的地图时考虑父元素的对齐，这可能很少发生。